Tailwind UI Components

Basic Buttons

<!-- Primary Button -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Primary Button
</button>

<!-- Secondary Button -->
<button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded">
  Secondary Button
</button>

<!-- Success Button -->
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
  Success Button
</button>

<!-- Danger Button -->
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
  Danger Button
</button>

Button Sizes

<!-- Small Button -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded text-sm">
  Small Button
</button>

<!-- Medium Button (Default) -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Medium Button
</button>

<!-- Large Button -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded text-lg">
  Large Button
</button>

Button Variants

<!-- Outline Button -->
<button class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded">
  Outline Button
</button>

<!-- Rounded Button -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
  Rounded Button
</button>

<!-- Icon Button -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded inline-flex items-center">
  <svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
    <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z"/>
  </svg>
  <span>Download</span>
</button>

<!-- Disabled Button -->
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed">
  Disabled Button
</button>

Basic Card

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="https://source.unsplash.com/random/400x200/?nature" alt="Card image">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Card Title</div>
    <p class="text-gray-700 text-base">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#photography</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#travel</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#nature</span>
  </div>
</div>

Horizontal Card

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://source.unsplash.com/random/200x200/?profile" alt="Profile image">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Company Name</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">John Doe, Software Engineer</a>
      <p class="mt-2 text-gray-500">Looking to collaborate on exciting projects that push the boundaries of web development.</p>
    </div>
  </div>
</div>

Interactive Card

<div class="max-w-sm rounded overflow-hidden shadow-lg transition-transform duration-300 hover:scale-105 hover:shadow-xl">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Interactive Card</div>
    <p class="text-gray-700 text-base">
      This card scales up slightly and increases its shadow on hover, creating a subtle interactive effect.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
      Learn More
    </button>
  </div>
</div>