कार्ड घटक प्रतिरूप

<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
  <!-- Card content goes here -->
</div>

<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
  <img
    src="photo.jpg"
    alt="Mountain landscape"
    class="w-full h-48 object-cover"
  />
  <div class="p-5">
    <h3 class="text-lg font-semibold text-gray-900">Card Title</h3>
    <p class="mt-1 text-sm text-gray-500">Short description of the card content.</p>
  </div>
</div>

<div class="p-5">
  <span class="text-xs font-semibold uppercase tracking-wide text-blue-600">Tutorial</span>
  <h3 class="mt-1 text-xl font-bold text-gray-900">Getting Started with Tailwind</h3>
  <p class="mt-2 text-sm text-gray-600 line-clamp-2">
    Learn how to set up Tailwind CSS and build your first responsive layout using utility classes.
  </p>
</div>

<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
  <img src="photo.jpg" alt="" class="w-full h-48 object-cover" />
  <div class="p-5">
    <h3 class="text-lg font-bold text-gray-900">Card Title</h3>
    <p class="mt-2 text-sm text-gray-600">A brief description of this card's content.</p>
  </div>
  <div class="border-t border-gray-100 flex items-center justify-between px-5 py-3">
    <span class="text-xs text-gray-400">June 2026</span>
    <button class="text-sm font-semibold text-blue-600 hover:text-blue-700">Read More</button>
  </div>
</div>

<div class="flex bg-white rounded-xl shadow-md overflow-hidden">
  <div class="flex-shrink-0">
    <img src="photo.jpg" alt="" class="w-40 h-full object-cover" />
  </div>
  <div class="p-5">
    <h3 class="text-lg font-bold text-gray-900">Horizontal Card</h3>
    <p class="mt-2 text-sm text-gray-600">Image on the left, content expanding on the right.</p>
    <button class="mt-3 text-sm font-semibold text-blue-600 hover:underline">View Article</button>
  </div>
</div>

<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm
            cursor-pointer transition-all duration-200
            hover:shadow-xl hover:-translate-y-1">
  <img src="photo.jpg" alt="" class="w-full h-48 object-cover" />
  <div class="p-5">
    <h3 class="text-lg font-bold text-gray-900">Hoverable Card</h3>
    <p class="mt-2 text-sm text-gray-600">Hover over me to see the lift effect.</p>
  </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-xl shadow-md overflow-hidden">
    <img src="a.jpg" alt="" class="w-full h-48 object-cover" />
    <div class="p-5">
      <h3 class="font-bold text-gray-900">Card One</h3>
    </div>
  </div>
  <div class="bg-white rounded-xl shadow-md overflow-hidden">
    <img src="b.jpg" alt="" class="w-full h-48 object-cover" />
    <div class="p-5">
      <h3 class="font-bold text-gray-900">Card Two</h3>
    </div>
  </div>
  <div class="bg-white rounded-xl shadow-md overflow-hidden">
    <img src="c.jpg" alt="" class="w-full h-48 object-cover" />
    <div class="p-5">
      <h3 class="font-bold text-gray-900">Card Three</h3>
    </div>
  </div>
</div>

<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-xs text-center">
  <div class="h-24 bg-gradient-to-r from-blue-500 to-purple-600"></div>
  <div class="px-5 pb-5">
    <img
      src="avatar.jpg"
      alt="Profile"
      class="w-20 h-20 rounded-full border-4 border-white -mt-10 mx-auto object-cover"
    />
    <h3 class="mt-2 text-lg font-bold text-gray-900">Jane Doe</h3>
    <p class="text-sm text-gray-500">Frontend Developer</p>
    <button class="mt-4 px-6 py-2 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700">
      Follow
    </button>
  </div>
</div>

<div class="bg-white rounded-xl shadow-md p-5 flex items-center justify-between">
  <div>
    <p class="text-sm text-gray-500 font-medium">Total Users</p>
    <p class="mt-1 text-3xl font-bold text-gray-900">12,489</p>
    <p class="mt-1 text-sm text-green-600 font-medium">+8.2% this month</p>
  </div>
  <div class="p-3 bg-blue-100 rounded-xl">
    <svg class="w-7 h-7 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0"/>
    </svg>
  </div>
</div>

<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden max-w-sm">
  <div class="p-5">
    <h3 class="text-lg font-bold text-gray-900 dark:text-white">Dark-Mode Ready</h3>
    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
      This card adapts automatically to the user's preferred color scheme.
    </p>
  </div>
  <div class="border-t border-gray-100 dark:border-gray-700 px-5 py-3 flex justify-end">
    <button class="text-sm font-semibold text-blue-500 hover:text-blue-400">Action</button>
  </div>
</div>

<a href="/post/tailwind-tips" class="group block bg-white rounded-xl shadow-md overflow-hidden
                              hover:shadow-xl transition-shadow duration-200">
  <img src="photo.jpg" alt="" class="w-full h-48 object-cover" />
  <div class="p-5">
    <h3 class="text-lg font-bold text-gray-900 group-hover:text-blue-600 transition-colors">
      Tailwind Tips and Tricks
    </h3>
    <p class="mt-2 text-sm text-gray-500">Click anywhere on this card to navigate.</p>
  </div>
</a>