? Cards in Tailwind CSS

Cards are flexible containers used to display grouped content such as text, images, buttons, and more. Tailwind CSS makes it easy to build clean, responsive card layouts using utility classes.

Basic Card Example

<div class="max-w-sm rounded overflow-hidden shadow-lg bg-white">  <img class="w-full" src="https://source.unsplash.com/random/400x200" 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">      Some quick example text to build on the card title and make up the bulk of the card's content.    </p>  </div>  <div class="px-6 pt-4 pb-2">    <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">      Action    </button>  </div></div>

Explanation:

• max-w-sm: max width small (responsive)

• rounded: rounded corners

• overflow-hidden: clips child elements within rounded corners

• shadow-lg: large box shadow for depth

• bg-white: white background

• Padding classes px-6 py-4 for spacing inside the card

Card With Header, Body, and Footer

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden">  <div class="px-6 py-4 border-b">    <h2 class="text-xl font-semibold">Card Header</h2>  </div>  <div class="px-6 py-4">    <p class="text-gray-600">This is the body of the card with some descriptive text.</p>  </div>  <div class="px-6 py-4 border-t flex justify-end space-x-2">    <button class="bg-gray-200 px-4 py-2 rounded hover:bg-gray-300">Cancel</button>    <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Save</button>  </div></div>

Card with Image & Overlay Text

<div class="relative max-w-sm rounded overflow-hidden shadow-lg">  <img src="https://source.unsplash.com/400x200/?nature" alt="Nature" class="w-full" />  <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-4">    <h3 class="text-white text-lg font-bold">Overlay Title</h3>    <p class="text-gray-300 text-sm">Some overlay description text.</p>  </div></div>

Responsive Grid of Cards

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">  <!-- Repeat card components here --></div>

Summary

Would you like me to help build a card component with dynamic content or interactive elements?