Cards in Tailwind

Tailwind CSS provides utility classes to create stylish and responsive cards for displaying content on web pages. Here's how you can create cards using Tailwind:

1. Basic Card Structure

Create a basic card with a title, description, and action button:

<div class="max-w-sm rounded overflow-hidden shadow-lg">
    <img class="w-full" src="https://via.placeholder.com/350x150" alt="Placeholder 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. Phasellus malesuada urna sed orci facilisis, nec fringilla nulla vestibulum.</p>
    </div>
    <div class="px-6 py-4">
        <a href="#" class="inline-block bg-blue-500 rounded-full px-3 py-1 text-sm font-semibold text-white mr-2">Action</a>
    </div>
</div>

2. Responsive Card

Make the card responsive for different screen sizes:

<div class="max-w-sm sm:w-full md:w-1/2 lg:w-1/3 xl:w-1/4 rounded overflow-hidden shadow-lg">
    <img class="w-full" src="https://via.placeholder.com/350x150" alt="Placeholder 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. Phasellus malesuada urna sed orci facilisis, nec fringilla nulla vestibulum.</p>
    </div>
    <div class="px-6 py-4">
        <a href="#" class="inline-block bg-blue-500 rounded-full px-3 py-1 text-sm font-semibold text-white mr-2">Action</a>
    </div>
</div>

Conclusion

With Tailwind CSS, you can easily create visually appealing and responsive cards to showcase your content. By leveraging utility classes for styling and layout, you can customize the appearance of cards to match the design of your web application.

Archive