Creating the Card Container
Start by building a basic card container using background, padding, rounded corners, and shadow. This forms the base structure of your card.
Example:
<div class=”bg-white shadow-md rounded-lg p-6″>
<h2 class=”text-xl font-semibold”>Card Title</h2>
<p class=”text-gray-600″>This is a simple card.</p>
</div>
Adding Image to the Card
Enhance your card by including an image at the top. Use rounded-t-lg to match the card’s border radius.
Example:
<div class=”bg-white shadow-md rounded-lg overflow-hidden”>
<img src=”https://via.placeholder.com/400″ class=”w-full h-48 object-cover” />
<div class=”p-4″>
<h2 class=”text-lg font-semibold”>Card with Image</h2>
</div>
</div>
Styling Card Content
Use typography and spacing utilities to style your card content neatly. Tailwind makes it easy to control text size, color, and spacing.
Example:
<div class=”p-4″>
<h3 class=”text-lg font-bold mb-2″>Title</h3>
<p class=”text-gray-500 text-sm”>
Clean and readable content inside the card.
</p>
</div>
Adding Buttons & Actions
Include buttons or links for user interaction. Tailwind provides utilities for styling buttons with hover effects.
Example:
<button class=”mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600″>
Read More
</button>
Responsive Card Layout
Use grid or flex utilities to display multiple cards in a responsive layout across different screen sizes.
Example:
<div class=”grid grid-cols-1 md:grid-cols-3 gap-6″>
<div class=”bg-white p-4 shadow rounded”>Card 1</div>
<div class=”bg-white p-4 shadow rounded”>Card 2</div>
<div class=”bg-white p-4 shadow rounded”>Card 3</div>
</div>
