Tailwind CSS Card

Cards provide a flexible and extensible content container with multiple variants and options.

Example

Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quos similique harum! Et, nemo dolores.

<div class="card max-w-sm">
 <img src="../assets/images/docs/placeholder-4by3.svg" alt="" />
 <div class="card-body flex flex-col gap-4">
    <div>
       <h5>Card Title</h5>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quos similique harum! Et, nemo dolores.</p>
    </div>
    <div>
       <a
          href="#"
          class="btn inline-flex items-center gap-x-2 bg-green-600 text-white border-green-600 disabled:opacity-50 disabled:pointer-events-none hover:text-white hover:bg-green-700 hover:border-green-700 active:bg-green-700 active:border-green-700 focus:outline-none focus:ring-4 focus:ring-green-100"
          >
       Read More
       </a>
    </div>
 </div>
</div>

Body

Simple body example with text.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quos similique harum! Et, nemo dolores.

<div class="card max-w-sm">
 <div class="card-body flex flex-col gap-4">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quos similique harum! Et, nemo dolores.</p>
 </div>
</div>

Header and footer

Add an optional header and/or footer within a card.

Featured
Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quos similique harum! Et, nemo dolores.

<div class="card max-w-sm">
  <div class="bg-gray-100 px-6 py-3 rounded-t-lg">
     <span>Featured</span>
  </div>
  <div class="card-body flex flex-col gap-4">
     <div>
        <h5>Card Title</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quos similique harum! Et, nemo dolores.</p>
     </div>
     <div class="">
        <a href="#" class="inline-flex items-center gap-x-1 text-green-600 font-semibold underline hover:text-green-700">Link</a>
     </div>
  </div>
 </div>
Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quos similique harum! Et, nemo dolores.

Last updated 5 mins ago 
<div class="card max-w-sm">
  <div class="card-body flex flex-col gap-4">
     <div>
        <h5>Card Title</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quos similique harum! Et, nemo dolores.</p>
     </div>
     <div class="">
        <a href="#" class="inline-flex items-center gap-x-1 text-green-600 font-semibold underline hover:text-green-700">Link</a>
     </div>
  </div>
  <div class="bg-gray-100 px-6 py-3 rounded-b-lg">
     <span>Last updated 5 mins ago</span>
  </div>
 </div>

Horizontal

Add an optional header and/or footer within a card.

Image Description
Card Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quos similique harum! Et, nemo dolores.

Link 
<div class="card md:flex-row">
  <div class="flex-shrink-0 relative w-full rounded-t-lg overflow-hidden pt-[30%] sm:rounded-s-xl sm:max-w-60 md:rounded-se-none md:max-w-xs">
     <img class="size-full absolute top-0 start-0 object-cover" src="../assets/images/docs/placeholder-4by3.svg" alt="Image Description" />
  </div>
  <div class="card-body flex flex-col gap-4">
     <div>
        <h5 class="mb-2">Card Title</h5>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae quos similique harum! Et, nemo dolores.</p>
     </div>
     <div class="mt-auto">
        <a href="#" class="inline-flex items-center gap-x-1 text-green-600 font-semibold underline hover:text-green-700">Link</a>
     </div>
  </div>
                       </div>