Heads up, this content is in beta. Use at your own risk!
Cards are versatile components in web design, offering a great way to display information in a neat, organized way. In this guide, we’ll create a responsive card component using Tailwind CSS.
Basic Card
Here’s a simple card with an image, title, and description:
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus, dolores?
<div class="max-w-sm m-2 overflow-hidden rounded shadow-lg">
<img
class="w-full"
src="https://source.unsplash.com/random/400x200"
alt="Sunset in the mountains"
/>
<div class="px-6 py-4">
<div class="mb-2 text-xl font-bold">Card title</div>
<p class="text-base text-gray-700">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus,
dolores?
</p>
</div>
</div>In this example, we’re creating a card with a maximum width (max-w-sm) and rounded corners (rounded). We apply overflow-hidden to clip the content to the rounded border, and shadow-lg to apply a large shadow to the card. The image takes the full width of the card (w-full), and the content in the card is given horizontal (px-6) and vertical (py-4) padding.
Card with Footer
We can also include a footer in our card:
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus, dolores?
<div class="max-w-sm m-2 overflow-hidden rounded shadow-lg">
<img
class="w-full"
src="https://source.unsplash.com/random/400x200"
alt="Sunset in the mountains"
/>
<div class="px-6 py-4">
<div class="mb-2 text-xl font-bold">Card title</div>
<p class="text-base text-gray-700">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus,
dolores?
</p>
</div>
<div class="px-6 py-4 bg-gray-100">
<button
class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
>
Click Me
</button>
</div>
</div>In the above example, we added a footer using a div with the bg-gray-100 class for a light gray background. The text is aligned to the right with the text-right class. We also added a button inside the footer.