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:

HTML
Card title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus, dolores?

Code
<div class="max-w-sm m-2 overflow-hidden rounded shadow-lg">
  <img
    class="w-full bg-cover random-unsplash-image"
    width="400"
    height="200"
    alt=""
  />
  <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.

We can also include a footer in our card:

HTML
Card title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus, dolores?

Code
<div class="max-w-sm m-2 overflow-hidden rounded shadow-lg">
  <img
    class="w-full bg-cover random-unsplash-image"
    width="400"
    height="200"
    alt=""
  />
  <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.