Basic examples
Simple
Use the following simple card component with a title and description.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div
class="block rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
<button
type="button"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Button
</button>
</div>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
Hey there 👋 we want to make TW elements a community-driven project. It's open source and free, and we would like it to stay that way. If you enjoy it, help the project grow by sharing it with your peers. Every share counts, thank you!
Image
You can use the following example of a card element with an image for blog posts, user cards, and many more.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div
class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<a href="#!">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/nature/184.jpg"
alt="" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
<button
type="button"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Button
</button>
</div>
</div>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
Image with ripple
Indicate the point of touch with user input to screen reactions using ripple on card image.
<div
class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div
class="relative overflow-hidden bg-cover bg-no-repeat"
data-te-ripple-init
data-te-ripple-color="light">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/nature/186.jpg"
alt="" />
<a href="#!">
<div
class="absolute bottom-0 left-0 right-0 top-0 h-full w-full overflow-hidden bg-[hsla(0,0%,98%,0.15)] bg-fixed opacity-0 transition duration-300 ease-in-out hover:opacity-100"></div>
</a>
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
<button
type="button"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Button
</button>
</div>
</div>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
Header and footer
Add optional header and footer sections to the card.
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
2 days ago
<div
class="block rounded-lg bg-white text-center shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div
class="border-b-2 border-neutral-100 px-6 py-3 dark:border-neutral-600 dark:text-neutral-50">
Featured
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Special title treatment
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
With supporting text below as a natural lead-in to additional
content.
</p>
<button
type="button"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Button
</button>
</div>
<div
class="border-t-2 border-neutral-100 px-6 py-3 dark:border-neutral-600 dark:text-neutral-50">
2 days ago
</div>
</div>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
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
The building block of a card is the div with
p-6 class. Use it whenever you need a padded section within a
card.
This is some text within a card body.
<div
class="block w-full rounded-lg bg-white text-left shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div class="p-6">
<p class="text-base text-neutral-600 dark:text-neutral-200">
This is some text within a card body.
</p>
</div>
</div>
Titles, text and links
Tailwind CSS classes beautifully style card titles, text, and links, creating a captivating and user-friendly experience.
Special title treatment
Card subtitle
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Link Another Link
<div
class="block max-w-[18rem] rounded-lg bg-white text-left shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div class="p-6">
<h5
class="mb-1 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Special title treatment
</h5>
<h6
class="mb-2 text-base font-medium leading-tight text-neutral-500 dark:text-neutral-50">
Card subtitle
</h6>
<p
class="mb-4 text-base leading-normal text-neutral-600 dark:text-neutral-200">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
<a
type="button"
href="#"
class="pointer-events-auto mr-5 inline-block cursor-pointer rounded text-base font-normal leading-normal text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:text-primary-700">
Card Link
</a>
<a
type="button"
href="#"
class="pointer-events-auto inline-block cursor-pointer rounded text-base font-normal leading-normal text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:text-primary-700">
Another Link
</a>
</div>
</div>
Images
The following example illustrates the card using Tailwind CSS classes, resulting in image being positioned at the top of each card.
Some quick example text to build on the card title and make up the bulk of the card's content.
<div
class="block max-w-[18rem] rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div class="relative overflow-hidden bg-cover bg-no-repeat">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/nature/182.jpg"
alt="" />
</div>
<div class="p-6">
<p class="text-base text-neutral-600 dark:text-neutral-200">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
List groups
Create lists of content in a card with a flush list group.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div
class="block w-full max-w-[18rem] rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<ul class="w-full">
<li
class="w-full border-b-2 border-neutral-100 border-opacity-100 p-4 dark:border-opacity-50">
Cras justo odio
</li>
<li
class="w-full border-b-2 border-neutral-100 border-opacity-100 p-4 dark:border-opacity-50">
Dapibus ac facilisis in
</li>
<li class="w-full p-4 dark:border-opacity-50">
Vestibulum at eros
</li>
</ul>
</div>
Featured
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div
class="block w-full max-w-[18rem] rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div
class="border-b-2 border-neutral-100 border-opacity-100 p-4 dark:border-opacity-50 dark:text-neutral-50">
Featured
</div>
<ul class="w-full">
<li
class="w-full border-b-2 border-neutral-100 border-opacity-100 px-4 py-3 dark:border-opacity-50">
Cras justo odio
</li>
<li
class="w-full border-b-2 border-neutral-100 border-opacity-100 px-4 py-3 dark:border-opacity-50">
Dapibus ac facilisis in
</li>
<li class="w-fullpx-4 py-3 dark:border-opacity-50">
Vestibulum at eros
</li>
</ul>
</div>
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Card footer
<div
class="block w-full max-w-[18rem] rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<ul class="w-full">
<li
class="w-full border-b-2 border-neutral-100 border-opacity-100 px-4 py-3 dark:border-opacity-50">
Cras justo odio
</li>
<li
class="w-full border-b-2 border-neutral-100 border-opacity-100 px-4 py-3 dark:border-opacity-50">
Dapibus ac facilisis in
</li>
<li
class="w-full border-b-2 border-neutral-100 border-opacity-100 px-4 py-3 dark:border-opacity-50">
Vestibulum at eros
</li>
</ul>
<div
class="border-neutral-100 p-4 dark:border-neutral-600 dark:text-neutral-50">
Card footer
</div>
</div>
Kitchen sink
Mix and match multiple content types to create the card you need, or throw everything in there.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
<div
class="block max-w-[18rem] rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div class="relative overflow-hidden bg-cover bg-no-repeat">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/city/062.jpg"
alt="" />
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="text-base text-neutral-600 dark:text-neutral-200">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
<ul class="w-full">
<li
class="w-full border-b-2 border-neutral-100 border-opacity-100 px-6 py-3 dark:border-opacity-50">
Cras justo odio
</li>
<li
class="w-full border-b-2 border-neutral-100 border-opacity-100 px-6 py-3 dark:border-opacity-50">
Dapibus ac facilisis in
</li>
<li
class="w-full border-neutral-100 border-opacity-100 px-6 py-3 dark:border-opacity-50">
Vestibulum at eros
</li>
</ul>
<div class="p-6">
<a
type="button"
href="#"
class="pointer-events-auto mr-5 inline-block cursor-pointer rounded text-base font-normal leading-normal text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:text-primary-700">
Card Link
</a>
<a
type="button"
href="#"
class="pointer-events-auto inline-block cursor-pointer rounded text-base font-normal leading-normal text-primary transition duration-150 ease-in-out hover:text-primary-600 focus:text-primary-600 focus:outline-none focus:ring-0 active:text-primary-700">
Another Link
</a>
</div>
</div>
Header and footer
Add an optional header and/or footer within a card.
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div
class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div
class="border-b-2 border-neutral-100 px-6 py-3 dark:border-neutral-600 dark:text-neutral-50">
Featured
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Special title treatment
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
With supporting text below as a natural lead-in to additional
content.
</p>
<button
type="button"
href="#"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Go somewhere
</button>
</div>
</div>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
An example that demonstrates a well-designed card header.
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div
class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<h5
class="border-b-2 border-neutral-100 px-6 py-3 text-xl font-medium leading-tight dark:border-neutral-600 dark:text-neutral-50">
Featured
</h5>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Special title treatment
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
With supporting text below as a natural lead-in to additional
content.
</p>
<button
type="button"
href="#"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Go somewhere
</button>
</div>
</div>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
Quote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<div
class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div
class="border-b-2 border-neutral-100 px-6 py-3 dark:border-neutral-600 dark:text-neutral-50">
Quote
</div>
<div class="p-6">
<blockquote>
<p class="text-xl">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
posuere erat a ante.
</p>
</blockquote>
<figcaption class="text-md text-neutral-600 dark:text-neutral-400">
- Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption>
</div>
</div>
Featured
Special title treatment
With supporting text below as a natural lead-in to additional content.
2 days ago
<div
class="block rounded-lg bg-white text-center shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div
class="border-b-2 border-neutral-100 px-6 py-3 dark:border-neutral-600 dark:text-neutral-50">
Featured
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Special title treatment
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
With supporting text below as a natural lead-in to additional
content.
</p>
<button
type="button"
href="#"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Go somewhere
</button>
</div>
<div
class="border-t-2 border-neutral-100 px-6 py-3 dark:border-neutral-600 dark:text-neutral-50">
2 days ago
</div>
</div>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
Sizing
Cards assume no specific width to start, so they’ll be 100% wide unless
otherwise stated. You can change this as needed with Tailwind CSS classes
like w-* or max-w-*.
Using grid markup
Using the grid, wrap cards in columns and rows as needed.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div class="grid grid-cols-1 grid-rows-1 md:grid-cols-2">
<div
class="mr-4 block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Special title treatment
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
With supporting text below as a natural lead-in to additional
content.
</p>
<button
type="button"
href="#"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Go somewhere
</button>
</div>
</div>
<div
class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Special title treatment
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
With supporting text below as a natural lead-in to additional
content.
</p>
<button
type="button"
href="#"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Go somewhere
</button>
</div>
</div>
</div>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
Using utilities
Use handful of available tailwind sizing utilities to quickly set a card’s width.
Card title
With supporting text below as a natural lead-in to additional content.
Card title
With supporting text below as a natural lead-in to additional content.
<div
class="block w-3/4 rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
With supporting text below as a natural lead-in to additional content.
</p>
<button
type="button"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Button
</button>
</div>
<div
class="mt-4 block w-1/2 rounded-lg bg-white p-6 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
With supporting text below as a natural lead-in to additional content.
</p>
<button
type="button"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Button
</button>
</div>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
Using custom CSS
Use custom CSS in your stylesheets or as inline styles to set a width.
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div
class="mr-4 block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700"
style="width: 18rem;">
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Special title treatment
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
With supporting text below as a natural lead-in to additional
content.
</p>
<button
type="button"
href="#"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Go somewhere
</button>
</div>
</div>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
Text alignment
You can quickly change the text alignment of any card using dedicated
Tailwind CSS classes (text-left, text-center, text-right).
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
Special title treatment
With supporting text below as a natural lead-in to additional content.
<div
class="block max-w-[18rem] rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Special title treatment
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
With supporting text below as a natural lead-in to additional
content.
</p>
<button
type="button"
href="#"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Go somewhere
</button>
</div>
</div>
<div
class="block max-w-[18rem] rounded-lg bg-white text-center shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Special title treatment
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
With supporting text below as a natural lead-in to additional
content.
</p>
<button
type="button"
href="#"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Go somewhere
</button>
</div>
</div>
<div
class="block max-w-[18rem] rounded-lg bg-white text-right shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Special title treatment
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
With supporting text below as a natural lead-in to additional
content.
</p>
<button
type="button"
href="#"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Go somewhere
</button>
</div>
</div>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
Navigation
Add some navigation to a card’s header (or block) with Tailiwnd Elements pills or tabs components.
<div
class="block w-full rounded-lg bg-white text-center shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div
class="border-b-2 border-neutral-100 px-3 pt-3 dark:border-neutral-600 dark:text-neutral-50">
<!--Tabs navigation-->
<ul
class="-mb-[2px] flex list-none flex-row flex-wrap border-b-0 pl-0"
role="tablist"
data-te-nav-ref>
<li role="presentation">
<a
href="#!"
class="block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
data-te-nav-active
role="tab"
aria-selected="true"
>Active</a
>
</li>
<li role="presentation">
<a
href="#!"
class="block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent data-[te-nav-active]:border-primary data-[te-nav-active]:text-primary dark:text-neutral-400 dark:hover:bg-transparent dark:data-[te-nav-active]:border-primary-400 dark:data-[te-nav-active]:text-primary-400"
role="tab"
aria-selected="false"
>Link</a
>
</li>
<li role="presentation">
<a
href="#!"
class="disabled pointer-events-none block border-x-0 border-b-2 border-t-0 border-transparent bg-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 hover:isolate hover:border-transparent hover:bg-neutral-100 focus:isolate focus:border-transparent dark:text-neutral-600"
role="tab"
aria-selected="false"
>Disabled</a
>
</li>
</ul>
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Special title treatment
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
With supporting text below as a natural lead-in to additional
content.
</p>
<button
type="button"
href="#"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Go somewhere
</button>
</div>
</div>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
<div
class="block w-full rounded-lg bg-white text-center shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div
class="border-b-2 border-neutral-100 p-3 dark:border-neutral-600 dark:text-neutral-50">
<!--Pills navigation-->
<ul
class="flex list-none flex-col flex-wrap pl-0 md:flex-row"
id="pills-tab"
role="tablist"
data-te-nav-ref>
<li role="presentation">
<a
href="#!"
class="block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
id="pills-home-tab"
data-te-nav-active
role="tab"
aria-selected="true"
>Active</a
>
</li>
<li role="presentation">
<a
href="#!"
class="block rounded bg-neutral-100 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
id="pills-profile-tab"
role="tab"
aria-selected="false"
>Link</a
>
</li>
<li role="presentation">
<a
href="#!"
class="pointer-events-none block rounded bg-neutral-200 px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-400 dark:bg-neutral-600 dark:text-neutral-500"
id="pills-disabled-tab"
role="tab"
aria-selected="false"
>Disabled</a
>
</li>
</ul>
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Special title treatment
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
With supporting text below as a natural lead-in to additional
content.
</p>
<button
type="button"
href="#"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
data-te-ripple-init
data-te-ripple-color="light">
Go somewhere
</button>
</div>
</div>
// Initialization for ES Users
import {
Ripple,
initTE,
} from "tw-elements";
initTE({ Ripple });
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 caps
Similar to headers and footers, cards can include top and bottom “image caps” - images at the top or bottom of a card.
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 3 mins ago
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 3 mins ago
<div
class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div class="relative overflow-hidden bg-cover bg-no-repeat">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/slides/041.webp"
alt="" />
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
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>
<p class="text-base text-neutral-600 dark:text-neutral-200">
<small class="text-neutral-500 dark:text-neutral-400">Last updated 3 mins ago</small>
</p>
</div>
</div>
<div
class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
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>
<p class="text-base text-neutral-600 dark:text-neutral-200">
<small class="text-neutral-500 dark:text-neutral-400">Last updated 3 mins ago</small>
</p>
</div>
<div class="relative overflow-hidden bg-cover bg-no-repeat">
<img
class="rounded-b-lg"
src="https://tecdn.b-cdn.net/img/new/slides/042.webp"
alt="" />
</div>
</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
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 3 mins ago
Note: Content should not be larger than the height of the
image. If content is larger than the image the content will be displayed
outside the image.
<div
class="block rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700">
<img
class="rounded-lg"
src="https://tecdn.b-cdn.net/img/new/slides/017.webp"
alt="" />
<div class="absolute top-0 p-6">
<h5 class="mb-2 text-xl font-medium leading-tight text-white">
Card title
</h5>
<p class="mb-4 text-base text-white">
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>
<p class="text-base text-white">
<small class="text-white">Last updated 3 mins ago</small>
</p>
</div>
</div>
Horizontal
Use card which has its child elements aligned horizontally.
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 3 mins ago
<div
class="flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 md:max-w-xl md:flex-row">
<img
class="h-96 w-full rounded-t-lg object-cover md:h-auto md:!rounded-none md:!rounded-l-lg"
src="https://tecdn.b-cdn.net/wp-content/uploads/2020/06/vertical.jpg"
alt="" />
<div class="flex flex-col justify-start p-6">
<h5
class="mb-2 text-xl font-medium text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
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>
<p class="text-xs text-neutral-500 dark:text-neutral-300">
Last updated 3 mins ago
</p>
</div>
</div>
Card styles
Cards include various options for customizing their backgrounds, borders, and color.
Background and color
Use bg-* and text-* classes to change the
appearance of a card.
Header
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div
class="block max-w-[18rem] rounded-lg bg-primary shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]">
<div
class="border-b-2 border-[#0000002d] px-6 py-3 text-white dark:text-neutral-50">
Header
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-white dark:text-neutral-50">
Primary card title
</h5>
<p class="text-base text-white dark:text-neutral-50">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div
class="block max-w-[18rem] rounded-lg bg-secondary shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-secondary-600">
<div
class="border-b-2 border-[#0000002d] px-6 py-3 text-white dark:text-neutral-50">
Header
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-white dark:text-neutral-50">
Secondary card title
</h5>
<p class="text-base text-white dark:text-neutral-50">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div
class="block max-w-[18rem] rounded-lg bg-success shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]">
<div
class="border-b-2 border-[#0000002d] px-6 py-3 text-white dark:text-neutral-50">
Header
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-white dark:text-neutral-50">
Success card title
</h5>
<p class="text-base text-white dark:text-neutral-50">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div
class="block max-w-[18rem] rounded-lg bg-danger shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]">
<div
class="border-b-2 border-[#0000002d] px-6 py-3 text-white dark:text-neutral-50">
Header
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-white dark:text-neutral-50">
Danger card title
</h5>
<p class="text-base text-white dark:text-neutral-50">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div
class="block max-w-[18rem] rounded-lg bg-warning shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]">
<div class="border-b-2 border-[#0000002d] px-6 py-3 text-black">
Header
</div>
<div class="p-6">
<h5 class="mb-2 text-xl font-medium leading-tight text-black">
Warning card title
</h5>
<p class="text-base text-black">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div
class="block max-w-[18rem] rounded-lg bg-info shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)]">
<div class="border-b-2 border-[#0000002d] px-6 py-3 text-black">
Header
</div>
<div class="p-6">
<h5 class="mb-2 text-xl font-medium leading-tight text-black">
Info card title
</h5>
<p class="text-base text-black">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div
class="block max-w-[18rem] rounded-lg bg-neutral-50 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-200">
<div class="border-b-2 border-[#0000002d] px-6 py-3 text-black">
Header
</div>
<div class="p-6">
<h5 class="mb-2 text-xl font-medium leading-tight text-black">
Light card title
</h5>
<p class="text-base text-black">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div
class="block max-w-[18rem] rounded-lg bg-neutral-800 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-600">
<div
class="border-b-2 border-[#0000002d] px-6 py-3 text-white dark:text-neutral-50">
Header
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-white dark:text-neutral-50">
Dark card title
</h5>
<p class="text-base text-white dark:text-neutral-50">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
Border
Modify the border color of a card by utilizing the
border-* classes. Additionally, you can add
text-* classes to achieve a design to the one demonstrated
below.
Header
Primary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Secondary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Danger card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Warning card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Info card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Light card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Header
Dark card title
Some quick example text to build on the card title and make up the bulk of the card's content.
<div
class="block max-w-[18rem] rounded-lg border border-primary bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:border-primary-300 dark:bg-neutral-600">
<div
class="border-b-2 border-[#0000002d] px-6 py-3 text-neutral-600 dark:text-neutral-50">
Header
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-primary dark:text-primary-300">
Primary card title
</h5>
<p class="text-base text-primary dark:text-primary-300">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div
class="block max-w-[18rem] rounded-lg border border-secondary bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:border-secondary-300 dark:bg-neutral-600">
<div
class="border-b-2 border-[#0000002d] px-6 py-3 text-neutral-600 dark:text-neutral-50">
Header
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-secondary dark:text-secondary-300">
Secondary card title
</h5>
<p class="text-base text-secondary dark:text-secondary-300">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div
class="block max-w-[18rem] rounded-lg border border-success bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:border-success-300 dark:bg-neutral-600">
<div
class="border-b-2 border-[#0000002d] px-6 py-3 text-neutral-600 dark:text-neutral-50">
Header
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-success dark:text-success-300">
Success card title
</h5>
<p class="text-base text-success dark:text-success-300">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div class="flex justify-center">
<div
class="block max-w-[18rem] rounded-lg border border-danger bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:border-danger-300 dark:bg-neutral-600">
<div
class="border-b-2 border-[#0000002d] px-6 py-3 text-neutral-600 dark:text-neutral-50">
Header
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-danger dark:text-danger-300">
Danger card title
</h5>
<p class="text-base text-danger dark:text-danger-300">
Some quick example text to build on the card title and make up
the bulk of the card's content.
</p>
</div>
</div>
</div>
<div
class="block max-w-[18rem] rounded-lg border border-warning bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:border-warning-300 dark:bg-neutral-600">
<div
class="border-b-2 border-[#0000002d] px-6 py-3 text-neutral-600 dark:text-neutral-50">
Header
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-warning dark:text-warning-300">
Warning card title
</h5>
<p class="text-base text-warning dark:text-warning-300">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div
class="block max-w-[18rem] rounded-lg border border-info bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:border-info-300 dark:bg-neutral-600">
<div
class="border-b-2 border-[#0000002d] px-6 py-3 text-neutral-600 dark:text-neutral-50">
Header
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-info dark:text-info-300">
Info card title
</h5>
<p class="text-base text-info dark:text-info-300">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div
class="block max-w-[18rem] rounded-lg border border-neutral-200 bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:border-neutral-300 dark:bg-neutral-600">
<div
class="border-b-2 border-[#0000002d] px-6 py-3 text-neutral-600 dark:text-neutral-50">
Header
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-black dark:text-neutral-50">
Light card title
</h5>
<p class="text-base text-black dark:text-neutral-50">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
<div
class="block max-w-[18rem] rounded-lg border border-neutral-700 bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-600">
<div
class="border-b-2 border-[#0000002d] px-6 py-3 text-neutral-600 dark:text-neutral-50">
Header
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-black dark:text-neutral-50">
Dark card title
</h5>
<p class="text-base text-black dark:text-neutral-50">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
</div>
Mixins utilities
You can also change the borders on the card header and footer as needed,
and even remove their background-color with
.bg-transparent.
Header
Success card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Footer
<div
class="block max-w-[18rem] rounded-lg border border-success bg-transparent shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:border-success-300 dark:bg-neutral-600">
<div
class="border-b-2 border-success px-6 py-3 text-neutral-600 dark:border-success-300 dark:text-neutral-50">
Header
</div>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-success dark:text-success-300">
Success card title
</h5>
<p class="text-base text-success dark:text-success-300">
Some quick example text to build on the card title and make up the
bulk of the card's content.
</p>
</div>
<div
class="border-t-2 border-success px-6 py-3 text-neutral-600 dark:border-success-300 dark:text-neutral-50">
Footer
</div>
</div>
Card deck layout
In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.
Cards group
Use card groups to render cards as a single, attached element with equal
width and height columns. Card groups start off stacked and use class
flex to become attached with uniform dimensions starting at
the sm breakpoint.
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 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 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 3 mins ago
<div class="sm:flex sm:justify-center">
<div
class="flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0 sm:rounded-r-none">
<a href="#!">
<img
class="rounded-t-lg sm:rounded-tr-none"
src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
alt="Hollywood Sign on The Hill" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
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>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
<small>Last updated 3 mins ago</small>
</p>
</div>
</div>
<div
class="flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0 sm:rounded-none">
<a href="#!">
<img
class="rounded-t-lg sm:rounded-none"
src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
alt="Palm Springs Road" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
This card has supporting text below as a natural lead-in to
additional content.
</p>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
<small>Last updated 3 mins ago</small>
</p>
</div>
</div>
<div
class="flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0 sm:rounded-l-none">
<a href="#!">
<img
class="rounded-t-lg sm:rounded-tl-none"
src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
alt="Los Angeles Skyscrapers" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
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>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
<small>Last updated 3 mins ago</small>
</p>
</div>
</div>
</div>
When using card groups with footers, their content will automatically line
up after adding mt-auto class.
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 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 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 3 mins ago
<div class="sm:flex sm:justify-center">
<div
class="flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0 sm:rounded-r-none">
<a href="#!">
<img
class="rounded-t-lg sm:rounded-tr-none"
src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
alt="Hollywood Sign on The Hill" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
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="mt-auto border-t-2 border-neutral-100 px-6 py-3 text-center dark:border-neutral-600 dark:text-neutral-50">
<small>Last updated 3 mins ago</small>
</div>
</div>
<div
class="flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0 sm:rounded-none">
<a href="#!">
<img
class="rounded-t-lg sm:rounded-none"
src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
alt="Palm Springs Road" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
This card has supporting text below as a natural lead-in to
additional content.
</p>
</div>
<div
class="mt-auto border-t-2 border-neutral-100 px-6 py-3 text-center dark:border-neutral-600 dark:text-neutral-50">
<small>Last updated 3 mins ago</small>
</div>
</div>
<div
class="flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0 sm:rounded-l-none">
<a href="#!">
<img
class="rounded-t-lg sm:rounded-tl-none"
src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
alt="Los Angeles Skyscrapers" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
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="mt-auto border-t-2 border-neutral-100 px-6 py-3 text-center dark:border-neutral-600 dark:text-neutral-50">
<small>Last updated 3 mins ago</small>
</div>
</div>
</div>
Cards grid
Use the tailwind grid class and its
grid-cols-* classes to control how many grid columns (wrapped
around your cards) you show per row. For example, here's
.grid-cols-1 laying out the cards on one column, and
.md:grid-cols-2 splitting four cards to equal width across
multiple rows, from the medium breakpoint up.
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.
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.
Card title
This is a longer card with supporting text below as a natural lead-in to additional 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.
<div class="grid-cols-1 sm:grid md:grid-cols-2 ">
<div
class="mx-3 mt-6 flex flex-col self-start rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
<a href="#!">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
alt="Hollywood Sign on The Hill" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
This is a longer card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
</div>
<div
class="mx-3 mt-6 flex flex-col self-start rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
<a href="#!">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
alt="Palm Springs Road" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
This is a longer card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
</div>
<div
class="mx-3 mt-6 flex flex-col self-start rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
<a href="#!">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/city/044.webp"
alt="Skyscrapers" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
This is a longer card with supporting text below as a natural
lead-in to additional content.
</p>
</div>
</div>
<div
class="mx-3 mt-6 flex flex-col self-start rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
<a href="#!">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
alt="Los Angeles Skyscrapers" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
This is a longer card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
</div>
</div>
Change it to .grid-cols-3 and you'll see the fourth card
wrap.
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.
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.
Card title
This is a longer card with supporting text below as a natural lead-in to additional 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.
<div class="grid-cols-1 sm:grid md:grid-cols-3 ">
<div
class="mx-3 mt-6 flex flex-col self-start rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
<a href="#!">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
alt="Hollywood Sign on The Hill" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
This is a longer card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
</div>
<div
class="mx-3 mt-6 flex flex-col self-start rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
<a href="#!">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
alt="Palm Springs Road" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
This is a longer card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
</div>
<div
class="mx-3 mt-6 flex flex-col self-start rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
<a href="#!">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/city/044.webp"
alt="Skyscrapers" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
This is a longer card with supporting text below as a natural
lead-in to additional content.
</p>
</div>
</div>
<div
class="mx-3 mt-6 flex flex-col self-start rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
<a href="#!">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
alt="Los Angeles Skyscrapers" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
This is a longer card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
</div>
</div>
When you need equal height, remove the .self-start from the
cards.
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.
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.
Card title
This is a longer card with supporting text below as a natural lead-in to additional 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.
<div class="grid-cols-1 sm:grid md:grid-cols-3 ">
<div
class="mx-3 mt-6 flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
<a href="#!">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
alt="Hollywood Sign on The Hill" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
This is a longer card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
</div>
<div
class="mx-3 mt-6 flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
<a href="#!">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
alt="Palm Springs Road" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
This is a longer card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
</div>
<div
class="mx-3 mt-6 flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
<a href="#!">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/city/044.webp"
alt="Skyscrapers" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
This is a longer card with supporting text below as a natural
lead-in to additional content.
</p>
</div>
</div>
<div
class="mx-3 mt-6 flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
<a href="#!">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
alt="Los Angeles Skyscrapers" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
This is a longer card with supporting text below as a natural
lead-in to additional content. This content is a little bit
longer.
</p>
</div>
</div>
</div>
Just like with card groups, card footers will automatically line up.
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 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 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 3 mins ago
<div class="grid-cols-1 sm:grid md:grid-cols-3 ">
<div
class="mx-3 mt-6 flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
<a href="#!">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/city/044.webp"
alt="Skyscrapers" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
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="mt-auto border-t-2 border-neutral-100 px-6 py-3 text-center dark:border-neutral-600 dark:text-neutral-50">
<small>Last updated 3 mins ago</small>
</div>
</div>
<div
class="mx-3 mt-6 flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
<a href="#!">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/city/043.webp"
alt="Los Angeles Skyscrapers" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
This card has supporting text below as a natural lead-in to
additional content.
</p>
</div>
<div
class="mt-auto border-t-2 border-neutral-100 px-6 py-3 text-center dark:border-neutral-600 dark:text-neutral-50">
<small>Last updated 3 mins ago</small>
</div>
</div>
<div
class="mx-3 mt-6 flex flex-col rounded-lg bg-white shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-700 sm:shrink-0 sm:grow sm:basis-0">
<a href="#!">
<img
class="rounded-t-lg"
src="https://tecdn.b-cdn.net/img/new/standard/city/042.webp"
alt="Palm Springs Road" />
</a>
<div class="p-6">
<h5
class="mb-2 text-xl font-medium leading-tight text-neutral-800 dark:text-neutral-50">
Card title
</h5>
<p class="mb-4 text-base text-neutral-600 dark:text-neutral-200">
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="mt-auto border-t-2 border-neutral-100 px-6 py-3 text-center dark:border-neutral-600 dark:text-neutral-50">
<small>Last updated 3 mins ago</small>
</div>
</div>
</div>
Related resources
Tutorials:
hover state
focus active and others
dark mode
arbitrary values
flexbox
text
spacing
utility first
buttons
ripple effect
carousel
rounded corners
shadows
cards
pricing cards
advanced grid
reorder columns
sizing
inputs
forms
Extended Docs:
colors
dividers
headings
icons
images
shadows
typography
avatar
buttons
modal
placeholders
testimonials
form templates
login form
registration form
charts
tables
center grid items
center text
colors
display flex
grid columns
spacing
text bold
text size
Design System (Figma):
introduction
content should be the star
less is more
power of visual hierarchy
art of prioritization
de emphasize with no mercy
size matters
label overload
beyond borders
let it breathe
user experience
do not start with the roof
project personality
design system
plan the process
principles
tips and tricks