- Components
- Card
Components
Tailwind CSS Card
Cards provide a flexible and extensible content container with multiple variants and options.
Basic usage
Example
A basic card containing a title, content and an extra corner content.
Cards assume no specific width to start, so they'll be 100% wide unless otherwise stated.
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="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<img class="w-full h-auto rounded-t-xl" src="../docs/assets/img/500x300/img1.jpg" alt="Image Description">
<div class="p-4 md:p-5">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-1 text-gray-800 dark:text-gray-400">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="mt-3 py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800" href="#">
Go somewhere
</a>
</div>
</div>
Content types
Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what's supported.
Body
Simple body example with text.
<div class="flex flex-col bg-white border shadow-sm rounded-xl p-4 md:p-5 dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7] dark:text-gray-400">
Some quick example text to build on the card title and make up the bulk of the card's content.
</div>
Simple card
A simple card only containing a content area.
Card title
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link
<div class="flex flex-col bg-white border shadow-sm rounded-xl p-4 md:p-5 dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-1 text-xs font-medium uppercase text-gray-500 dark:text-gray-500">
Card subtitle
</p>
<p class="mt-2 text-gray-800 dark:text-gray-400">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<a class="mt-3 inline-flex items-center gap-2 mt-5 text-sm font-medium text-blue-500 hover:text-blue-700" href="#">
Card link
<svg class="w-2.5 h-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</div>
Header and footer
Add an optional header and/or footer within a card.
Featured
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="bg-gray-100 border-b rounded-t-xl py-3 px-4 md:py-4 md:px-5 dark:bg-gray-800 dark:border-gray-700">
<p class="mt-1 text-sm text-gray-500 dark:text-gray-500">
Featured
</p>
</div>
<div class="p-4 md:p-5">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-2 text-gray-800 dark:text-gray-400">
With supporting text below as a natural lead-in to additional content.
</p>
<a class="mt-3 inline-flex items-center gap-2 mt-5 text-sm font-medium text-blue-500 hover:text-blue-700" href="#">
Card link
<svg class="w-2.5 h-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</div>
</div>
Simple footer within a card.
Last updated 5 mins ago
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="p-4 md:p-5">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-2 text-gray-800 dark:text-gray-400">
With supporting text below as a natural lead-in to additional content.
</p>
<a class="mt-3 inline-flex items-center gap-2 mt-5 text-sm font-medium text-blue-500 hover:text-blue-700" href="#">
Card link
<svg class="w-2.5 h-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</div>
<div class="bg-gray-100 border-t rounded-b-xl py-3 px-4 md:py-4 md:px-5 dark:bg-gray-800 dark:border-gray-700">
<p class="mt-1 text-sm text-gray-500 dark:text-gray-500">
Last updated 5 mins ago
</p>
</div>
</div>
Sizes
Small card size.
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="p-4 md:p-5">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-2 text-gray-800 dark:text-gray-400">
With supporting text below as a natural lead-in to additional content.
</p>
<a class="mt-3 inline-flex items-center gap-2 mt-5 text-sm font-medium text-blue-500 hover:text-blue-700" href="#">
Card link
<svg class="w-2.5 h-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</div>
</div>
Default card size.
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="p-4 md:p-7">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-2 text-gray-800 dark:text-gray-400">
With supporting text below as a natural lead-in to additional content.
</p>
<a class="mt-3 inline-flex items-center gap-2 mt-5 text-sm font-medium text-blue-500 hover:text-blue-700" href="#">
Card link
<svg class="w-2.5 h-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</div>
</div>
Large card size.
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="p-4 md:p-10">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-2 text-gray-800 dark:text-gray-400">
With supporting text below as a natural lead-in to additional content.
</p>
<a class="mt-3 inline-flex items-center gap-2 mt-5 text-sm font-medium text-blue-500 hover:text-blue-700" href="#">
Card link
<svg class="w-2.5 h-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</div>
</div>
Navigation
Add some navigation to a card's header (or block).
<div class="border rounded-xl shadow-sm p-6 dark:bg-gray-800 dark:border-gray-700">
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="bg-gray-100 border-b rounded-t-xl pt-3 px-4 md:pt-4 md:px-5 dark:bg-slate-800 dark:border-gray-700">
<nav class="flex space-x-2" aria-label="Tabs">
<a class="-mb-px py-3 px-4 bg-white text-sm font-medium text-center border border-b-transparent text-gray-500 rounded-t-lg hover:text-gray-700 focus:z-10 dark:bg-gray-800 dark:border-gray-700 dark:border-b-gray-800 dark:hover:text-gray-400" href="#">
Active
</a>
<a class="-mb-px py-3 px-4 text-sm font-medium text-center border-b text-gray-500 rounded-t-lg hover:text-gray-700 focus:z-10 dark:border-gray-700 dark:hover:text-gray-400" href="#">
Link
</a>
<a class="-mb-px py-3 px-4 text-sm font-medium text-center border-b text-gray-500 rounded-t-lg hover:text-gray-700 focus:z-10 dark:border-gray-700 dark:hover:text-gray-400" href="#">
Link
</a>
</nav>
</div>
<div class="p-4 text-center md:py-7 md:px-5">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-2 text-gray-800 dark:text-gray-400">
With supporting text below as a natural lead-in to additional content.
</p>
<a class="mt-3 py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800" href="#">
Go somewhere
</a>
</div>
</div>
</div>
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<!-- Select (Mobile only) -->
<div class="sm:hidden">
<label for="hs-card-nav-tabs" class="sr-only">Select a nav</label>
<select name="hs-card-nav-tabs" id="hs-card-nav-tabs" class="block w-full border-t-0 border-x-0 border-gray-300 rounded-t-xl focus:ring-blue-600 focus:border-blue-600">
<option selected>My Account</option>
<option>Company</option>
<option>Team Members</option>
<option>Billing</option>
</select>
</div>
<!-- End Select (Mobile only) -->
<!-- Nav Tabs (Device only) -->
<div class="hidden sm:block">
<nav class="relative z-0 flex border-b rounded-xl divide-x divide-gray-200 dark:border-gray-700 dark:divide-gray-700" aria-label="Tabs">
<a class="group relative min-w-0 flex-1 bg-white py-4 px-4 border-b-2 border-b-blue-600 text-gray-900 rounded-tl-xl text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 dark:bg-gray-800 dark:text-gray-300" aria-current="page" href="#">
My Account
</a>
<a class="group relative min-w-0 flex-1 bg-white py-4 px-4 text-gray-500 hover:text-gray-700 text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 dark:bg-gray-800 dark:hover:text-gray-400" href="#">
Company
</a>
<a class="group relative min-w-0 flex-1 bg-white py-4 px-4 text-gray-500 hover:text-gray-700 text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 dark:bg-gray-800 dark:hover:text-gray-400" href="#">
Team Members
</a>
<a class="group relative min-w-0 flex-1 bg-white py-4 px-4 text-gray-500 hover:text-gray-700 rounded-tr-xl text-sm font-medium text-center overflow-hidden hover:bg-gray-50 focus:z-10 dark:bg-gray-800 dark:hover:text-gray-400" href="#">
Billing
</a>
</nav>
</div>
<!-- End Nav Tabs (Device only) -->
<div class="p-4 text-center md:py-7 md:px-5">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-2 text-gray-800 dark:text-gray-400">
With supporting text below as a natural lead-in to additional content.
</p>
<a class="mt-3 py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800" href="#">
Go somewhere
</a>
</div>
</div>
Images
Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.
Image placeholders
Similar to headers and footers, cards can include top and bottom "image placeholder"—images at the top.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Last updated 5 mins ago
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<img class="w-full h-auto rounded-t-xl" src="../docs/assets/img/500x300/img1.jpg" alt="Image Description">
<div class="p-4 md:p-5">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-1 text-gray-800 dark:text-gray-400">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<p class="mt-5 text-xs text-gray-500 dark:text-gray-500">
Last updated 5 mins ago
</p>
</div>
</div>
Or bottom of the card.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Last updated 5 mins ago
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="p-4 md:p-5">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-1 text-gray-800 dark:text-gray-400">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<p class="mt-5 text-xs text-gray-500 dark:text-gray-500">
Last updated 5 mins ago
</p>
</div>
<img class="w-full h-auto rounded-b-xl" src="../docs/assets/img/500x300/img1.jpg" alt="Image Description">
</div>
Image overlays
Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need additional styles or utilities.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Last updated 5 mins ago
<div class="relative bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<img class="w-full h-auto rounded-xl" src="../docs/assets/img/900x500/img1.jpg" alt="Image Description">
<div class="absolute top-0 left-0 right-0">
<div class="p-4 md:p-5">
<h3 class="text-lg font-bold text-gray-800">
Card title
</h3>
<p class="mt-1 text-gray-800">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<p class="mt-5 text-xs text-gray-500">
Last updated 5 mins ago
</p>
</div>
</div>
</div>
Attention needed
Animations
Image scaling animation on hover
Animate the card image with zoom out on hover.
<a class="flex flex-col group bg-white border shadow-sm rounded-xl overflow-hidden hover:shadow-lg transition dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]" href="#">
<div class="relative pt-[50%] sm:pt-[60%] lg:pt-[80%] rounded-t-xl overflow-hidden">
<img class="w-full h-full absolute top-0 left-0 object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-t-xl" src="../docs/assets/img/500x300/img1.jpg" alt="Image Description">
</div>
<div class="p-4 md:p-5">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-1 text-gray-800 dark:text-gray-400">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</a>
Transition on hover
Animate the card with a shadow on hover.
<a class="flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-lg transition dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]" href="#">
<img class="w-full h-auto rounded-t-xl" src="../docs/assets/img/500x300/img1.jpg" alt="Image Description">
<div class="p-4 md:p-5">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-1 text-gray-800 dark:text-gray-400">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
</div>
</a>
Horizontal
Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Last updated 5 mins ago
<div class="bg-white border rounded-xl shadow-sm sm:flex dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="flex-shrink-0 relative w-full rounded-t-xl overflow-hidden pt-[40%] sm:rounded-l-xl sm:max-w-[15rem] md:rounded-tr-none md:max-w-xs">
<img class="w-full h-full absolute top-0 left-0 object-cover" src="../src/docs/assets/img/500x600/img1.jpg" alt="Image Description">
</div>
<div class="flex flex-wrap">
<div class="p-4 flex flex-col h-full sm:p-7">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-1 text-gray-800 dark:text-gray-400">
Some quick example text to build on the card title and make up the bulk of the card's content.
</p>
<div class="mt-5 sm:mt-auto">
<p class="text-xs text-gray-500 dark:text-gray-500">
Last updated 5 mins ago
</p>
</div>
</div>
</div>
</div>
Card layout
Card group
Use card groups to render cards as a single, attached element with equal width and height columns.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 5 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 5 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
Last updated 5 mins ago
<div class="grid border rounded-xl shadow-sm divide-y overflow-hidden sm:flex sm:divide-y-0 sm:divide-x dark:border-gray-700 dark:shadow-slate-700/[.7] dark:divide-gray-600">
<div class="flex flex-col flex-[1_0_0%] bg-white dark:bg-gray-800">
<img class="w-full h-auto rounded-t-xl sm:rounded-tr-none" src="../docs/assets/img/500x300/img1.jpg" alt="Image Description">
<div class="p-4 flex-1 md:p-5">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-1 text-gray-800 dark:text-gray-400">
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
</p>
</div>
<div class="p-4 border-t sm:px-5 dark:border-gray-700">
<p class="text-xs text-gray-500 dark:text-gray-500">
Last updated 5 mins ago
</p>
</div>
</div>
<div class="flex flex-col flex-[1_0_0%] bg-white dark:bg-gray-800">
<img class="w-full h-auto" src="../docs/assets/img/500x300/img1.jpg" alt="Image Description">
<div class="p-4 flex-1 md:p-5">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-1 text-gray-800 dark:text-gray-400">
This card has supporting text below as a natural lead-in to additional content.
</p>
</div>
<div class="p-4 border-t sm:px-5 dark:border-gray-700">
<p class="text-xs text-gray-500 dark:text-gray-500">
Last updated 5 mins ago
</p>
</div>
</div>
<div class="flex flex-col flex-[1_0_0%] bg-white dark:bg-gray-800">
<img class="w-full h-auto sm:rounded-tr-xl" src="../docs/assets/img/500x300/img1.jpg" alt="Image Description">
<div class="p-4 flex-1 md:p-5">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-1 text-gray-800 dark:text-gray-400">
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
</p>
</div>
<div class="p-4 border-t sm:px-5 dark:border-gray-700">
<p class="text-xs text-gray-500 dark:text-gray-500">
Last updated 5 mins ago
</p>
</div>
</div>
</div>
With alert
Use an alert box that perfectly sits within a card.
Featured
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="bg-gray-100 border-b rounded-t-xl py-3 px-4 md:py-4 md:px-5 dark:bg-gray-800 dark:border-gray-700">
<p class="mt-1 text-sm text-gray-500 dark:text-gray-500">
Featured
</p>
</div>
<div class="p-4 md:p-5">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-2 text-gray-800 dark:text-gray-400">
With supporting text below as a natural lead-in to additional content.
</p>
<a class="mt-3 inline-flex items-center gap-2 mt-5 text-sm font-medium text-blue-500 hover:text-blue-700" href="#">
Card link
<svg class="w-2.5 h-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</div>
</div>
Centered body content
Simple example of a center aligned body content.
<div class="min-h-[15rem] flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="flex flex-auto flex-col justify-center items-center p-4 md:p-5">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-2 text-gray-800 dark:text-gray-400">
With supporting text below as a natural lead-in to additional content.
</p>
<a class="mt-3 inline-flex items-center gap-2 mt-5 text-sm font-medium text-blue-500 hover:text-blue-700" href="#">
Card link
<svg class="w-2.5 h-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</div>
</div>
Empty state
Display empty state placeholder when there is no data provided, display for friendly tips.
No data to show
<div class="min-h-[15rem] flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="flex flex-auto flex-col justify-center items-center p-4 md:p-5">
<svg class="max-w-[5rem]" viewBox="0 0 375 428" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M254.509 253.872L226.509 226.872" class="stroke-gray-400 dark:stroke-white" stroke="currentColor" stroke-width="7" stroke-linecap="round"/>
<path d="M237.219 54.3721C254.387 76.4666 264.609 104.226 264.609 134.372C264.609 206.445 206.182 264.872 134.109 264.872C62.0355 264.872 3.60864 206.445 3.60864 134.372C3.60864 62.2989 62.0355 3.87207 134.109 3.87207C160.463 3.87207 184.993 11.6844 205.509 25.1196" class="stroke-gray-400 dark:stroke-white" stroke="currentColor" stroke-width="7" stroke-linecap="round"/>
<rect x="270.524" y="221.872" width="137.404" height="73.2425" rx="36.6212" transform="rotate(40.8596 270.524 221.872)" class="fill-gray-400 dark:fill-white" fill="currentColor"/>
<ellipse cx="133.109" cy="404.372" rx="121.5" ry="23.5" class="fill-gray-400 dark:fill-white" fill="currentColor"/>
<path d="M111.608 188.872C120.959 177.043 141.18 171.616 156.608 188.872" class="stroke-gray-400 dark:stroke-white" stroke="currentColor" stroke-width="7" stroke-linecap="round"/>
<ellipse cx="96.6084" cy="116.872" rx="9" ry="12" class="fill-gray-400 dark:fill-white" fill="currentColor"/>
<ellipse cx="172.608" cy="117.872" rx="9" ry="12" class="fill-gray-400 dark:fill-white" fill="currentColor"/>
<path d="M194.339 147.588C189.547 148.866 189.114 142.999 189.728 138.038C189.918 136.501 191.738 135.958 192.749 137.131C196.12 141.047 199.165 146.301 194.339 147.588Z" class="fill-gray-400 dark:fill-white" fill="currentColor"/>
</svg>
<p class="mt-5 text-sm text-gray-500 dark:text-gray-500">
No data to show
</p>
</div>
</div>
Scrollable body
Simple example of a center aligned body content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer. This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
<div class="flex flex-col bg-white border shadow-sm rounded-xl dark:bg-gray-800 dark:border-gray-700 dark:shadow-slate-700/[.7]">
<div class="h-80 overflow-y-auto p-4 md:p-5">
<h3 class="text-lg font-bold text-gray-800 dark:text-white">
Card title
</h3>
<p class="mt-2 text-gray-800 dark:text-gray-400">
With supporting text below as a natural lead-in to additional content.
</p>
<a class="mt-3 inline-flex items-center gap-2 mt-5 text-sm font-medium text-blue-500 hover:text-blue-700" href="#">
Card link
<svg class="w-2.5 h-auto" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 1L10.6869 7.16086C10.8637 7.35239 10.8637 7.64761 10.6869 7.83914L5 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
</svg>
</a>
</div>
</div>