Card

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

Basic Card

Use this example to quote an external source inside a blockquote element.

Image Description

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere 
<div class="card shadow">
<img class="w-full h-auto rounded-t-md" src="../assets/images/blog/blog-img-1.jpg" alt="Image Description" />
<div class="card-body">
  <h3 class="text-lg font-bold">Card title</h3>
   <p class="mt-1">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a class="mt-2 btn gap-x-2 bg-indigo-600 text-white border-indigo-600 disabled:opacity-50 disabled:pointer-events-none hover:bg-indigo-800 hover:border-indigo-800 active:bg-indigo-800 active:border-indigo-800 focus:outline-none focus:ring-4 focus:ring-indigo-300" href="#">Go somewhere</a>
 </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-indigo-600 font-semibold underline hover:text-indigo-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-indigo-600 font-semibold underline hover:text-indigo-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-indigo-600 font-semibold underline hover:text-indigo-700">Link</a>
</div>
</div>
                 </div>