Tailwind card component example


Here is an example of a card component using Tailwind CSS:

<div class="bg-white rounded-lg shadow-md overflow-hidden">
    <img src="https://via.placeholder.com/600x400" alt="Card image" class="w-full h-64 object-cover">
    <div class="p-4">
        <h2 class="text-2xl font-bold text-gray-700">Card title</h2>
        <p class="text-gray-600">Card content</p>

In this example, the bg-white class adds a white background color to the card, the rounded-lg class adds rounded corners, the shadow-md class adds a medium shadow effect, and the overflow-hidden class hides any content that overflows the card.

The w-full and h-64 classes make the image take up the full width and a height of 64 units, respectively, and the object-cover class scales the image to cover the container while preserving its aspect ratio.

The text-2xl class makes the title text 2 times the size of the base font, the font-bold class makes the title text bold, and the text-gray-700 class adds a dark gray color to the title text. The text-gray-600 class adds a light gray color to the content text.

You can customize this card component by modifying the classes used or by adding additional content and styling as needed.