Tailwind CSS Component Library

<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Primary</button>
<button class="border border-blue-600 text-blue-600 px-4 py-2 rounded hover:bg-blue-600 hover:text-white">Outline</button>
<button class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">Success</button>

<nav class="bg-gray-800 p-4 flex justify-between items-center">
  <a href="#" class="text-white font-bold">Logo</a>
  <div class="space-x-4">
    <a href="#" class="text-gray-300 hover:text-white">Home</a>
    <a href="#" class="text-gray-300 hover:text-white">About</a>
    <a href="#" class="text-gray-300 hover:text-white">Contact</a>
  </div>
</nav>

<div class="bg-gray-800 p-6 rounded-lg shadow-md">
  <h4 class="font-bold mb-2 text-white">Card Title</h4>
  <p class="text-gray-300">This is a simple card component built with Tailwind.</p>
</div>

<div class="bg-red-900 border border-red-700 text-red-100 px-4 py-3 rounded relative" role="alert">
  <strong class="font-bold">Alert!</strong>
  <span class="block sm:inline"> Something went wrong.</span>
</div>

<button onclick="toggleModal('modal1')" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Open Modal</button>
<div id="modal1" class="modal">
  <div class="modal-content">
    <h3 class="text-lg font-bold mb-2 text-white">Modal Title</h3>
    <p class="text-gray-300 mb-4">This is a simple modal built with Tailwind CSS.</p>
    <button onclick="toggleModal('modal1')" class="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700">Close</button>
  </div>
</div>

<div class="relative">
  <button id="dropdownButton" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Dropdown</button>
  <div id="dropdownMenu" class="hidden absolute bg-gray-800 shadow-lg rounded mt-2 z-10">
    <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Option 1</a>
    <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Option 2</a>
    <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700 hover:text-white">Option 3</a>
  </div>
</div>

<div class="space-y-4">
  <input type="text" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter text...">
  <input type="email" class="w-full px-4 py-2 bg-gray-700 border border-gray-600 text-white rounded focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter email...">
</div>

<span class="bg-blue-900 text-blue-100 px-2.5 py-0.5 rounded-full text-sm font-semibold">Info</span>
<span class="bg-green-900 text-green-100 px-2.5 py-0.5 rounded-full text-sm font-semibold">Success</span>
<span class="bg-red-900 text-red-100 px-2.5 py-0.5 rounded-full text-sm font-semibold">Error</span>

<div class="flex border-b border-gray-600">
  <button class="tab-button px-4 py-2 -mb-px font-semibold border-b-2 border-blue-500 text-blue-400" onclick="openTab('tab1', this)">Tab 1</button>
  <button class="tab-button px-4 py-2 -mb-px font-semibold text-gray-300 hover:text-blue-400" onclick="openTab('tab2', this)">Tab 2</button>
  <button class="tab-button px-4 py-2 -mb-px font-semibold text-gray-300 hover:text-blue-400" onclick="openTab('tab3', this)">Tab 3</button>
</div>
<div id="tab1" class="tab-content p-4 bg-gray-800 text-gray-300 active">
  Content for Tab 1
</div>
<div id="tab2" class="tab-content p-4 bg-gray-800 text-gray-300">
  Content for Tab 2
</div>
<div id="tab3" class="tab-content p-4 bg-gray-800 text-gray-300">
  Content for Tab 3
</div>

<div class="border border-gray-600 rounded">
  <button class="accordion-button w-full text-left px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white" onclick="toggleAccordion('accordion1', this)">Section 1</button>
  <div id="accordion1" class="accordion-content p-4 bg-gray-800 text-gray-300 active">
    Content for Section 1
  </div>
  <button class="accordion-button w-full text-left px-4 py-2 bg-gray-700 hover:bg-gray-600 text-white" onclick="toggleAccordion('accordion2', this)">Section 2</button>
  <div id="accordion2" class="accordion-content p-4 bg-gray-800 text-gray-300">
    Content for Section 2
  </div>
</div>

<div class="bg-gray-800 p-6 rounded-lg shadow-md text-center">
  <h4 class="text-lg font-bold text-white mb-2">Pro Plan</h4>
  <p class="text-3xl font-bold text-blue-400 mb-4">$29<span class="text-sm text-gray-300">/mo</span></p>
  <ul class="text-gray-300 text-sm mb-6 space-y-2">
    <li><i class="fas fa-check text-blue-400 mr-2"></i>Unlimited Projects</li>
    <li><i class="fas fa-check text-blue-400 mr-2"></i>24/7 Support</li>
    <li><i class="fas fa-check text-blue-400 mr-2"></i>Advanced Analytics</li>
  </ul>
  <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 w-full">Choose Plan</button>
</div>

<div class="bg-gray-800 p-6 rounded-lg shadow-md">
  <p class="text-gray-300 italic mb-4">"This platform transformed our web development process!"</p>
  <div class="flex items-center">
    <img src="https://via.placeholder.com/40" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" loading="lazy">
    <div>
      <p class="text-white font-semibold">John Doe</p>
      <p class="text-gray-400 text-sm">CEO, Tech Corp</p>
    </div>
  </div>
</div>

<div class="space-y-4">
  <div>
    <p class="text-gray-300 text-sm mb-1">Skill Level: 80%</p>
    <div class="w-full bg-gray-700 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full" style="width: 80%;"></div>
    </div>
  </div>
  <div>
    <p class="text-gray-300 text-sm mb-1">Project Progress: 50%</p>
    <div class="w-full bg-gray-700 rounded-full h-2.5">
      <div class="bg-blue-600 h-2.5 rounded-full" style="width: 50%;"></div>
    </div>
  </div>
</div>

<div class="bg-gray-800 text-center py-12 px-6 rounded-lg">
  <h2 class="text-2xl font-bold text-white mb-4">Welcome to Your App</h2>
  <p class="text-gray-300 mb-6">Build something amazing with our powerful tools and resources.</p>
  <button class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700">Get Started</button>
</div>

<div class="bg-gray-800 p-6 rounded-lg shadow-md text-center">
  <i class="fas fa-rocket text-3xl text-blue-400 mb-4"></i>
  <h4 class="text-lg font-bold text-white mb-2">Fast Performance</h4>
  <p class="text-gray-300 text-sm">Optimized for speed to deliver seamless user experiences.</p>
</div>