A card groups related content. Choose its HTML based on that content: an article can stand on its own, while a plain div may be enough for a visual wrapper.
Version and setup
These examples are compiled with Tailwind CSS 3.3.2. Copy document includes the required CSS, so that document runs without a Tailwind installation. To use the utility classes in a project, follow the versioned setup guide.
This site customizes its spacing scale: p-10 is 10px here, while standard Tailwind 3 uses 2.5rem. The examples below use unaffected spacing keys or explicit arbitrary values. Check your project configuration before assuming a utility’s size. Tailwind 4 has a different setup; use its official installation guide for a new version-4 project.
An article card
Tailwind CSS 3.3.2; the CSS tab includes the compiled styles.
HTML
<article class="max-w-sm overflow-hidden rounded border border-gray-300">
<img
class="w-full"
width="400"
height="200"
src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22480%22%20height%3D%22240%22%20viewBox%3D%220%200%20480%20240%22%3E%3Crect%20width%3D%22480%22%20height%3D%22240%22%20fill%3D%22%23dbeafe%22/%3E%3Ccircle%20cx%3D%22380%22%20cy%3D%2255%22%20r%3D%2225%22%20fill%3D%22%23fef3c7%22/%3E%3Cpath%20d%3D%22M0%20240L135%2065L280%20240Z%22%20fill%3D%22%23164eae%22/%3E%3Cpath%20d%3D%22M145%20240L325%2090L480%20240Z%22%20fill%3D%22%2360a5fa%22/%3E%3Cpath%20d%3D%22M0%20210H480V240H0Z%22%20fill%3D%22%23172334%22/%3E%3C/svg%3E%0A"
alt="Blue landscape illustration"
/>
<div class="p-4">
<h2 class="text-xl font-bold">Plan a walking route</h2>
<p class="mt-4 text-gray-800">
Choose a short route, check the weather and leave time for a break.
</p>
<a href="#route" class="inline-block mt-4 text-blue-700 underline"
>Read the route notes</a
>
</div>
</article>
<section id="route" class="mt-4">
<h2 class="font-bold">Route notes</h2>
<p>Start at the park entrance and follow the marked path.</p>
</section>CSS
*,
::before,
::after {
box-sizing: border-box;
border: 0 solid #e5e7eb;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
a {
color: inherit;
text-decoration: inherit;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
.mt-4 {
margin-top: 1rem;
}
.inline-block {
display: inline-block;
}
.w-full {
width: 100%;
}
.max-w-sm {
max-width: 24rem;
}
.overflow-hidden {
overflow: hidden;
}
.rounded {
border-radius: 0.25rem;
}
.border {
border-width: 1px;
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.p-4 {
padding: 1rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.font-bold {
font-weight: 700;
}
.text-blue-700 {
--tw-text-opacity: 1;
color: rgb(29 78 216 / var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgb(31 41 55 / var(--tw-text-opacity));
}
.underline {
text-decoration-line: underline;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
The heading gives the card structure. The embedded illustration is stable and copyable; its alternative text describes the actual artwork. The link goes to real notes within this document.
A card without an image
Tailwind CSS 3.3.2; the CSS tab includes the compiled styles.
HTML
<section class="max-w-sm p-4 rounded border border-blue-700 bg-blue-50">
<h2 class="text-xl font-bold">Next: the box model</h2>
<p class="mt-4">Compare padding inside a border with margin outside it.</p>
</section>CSS
*,
::before,
::after {
box-sizing: border-box;
border: 0 solid #e5e7eb;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
button,
input,
select,
textarea {
font: inherit;
color: inherit;
}
button {
background: none;
}
img,
svg,
video {
display: block;
max-width: 100%;
}
img,
video {
height: auto;
}
a {
color: inherit;
text-decoration: inherit;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
.mt-4 {
margin-top: 1rem;
}
.max-w-sm {
max-width: 24rem;
}
.rounded {
border-radius: 0.25rem;
}
.border {
border-width: 1px;
}
.border-blue-700 {
--tw-border-opacity: 1;
border-color: rgb(29 78 216 / var(--tw-border-opacity));
}
.bg-blue-50 {
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.font-bold {
font-weight: 700;
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
An image is optional. Do not add a button that does nothing, or make every card focusable when it has no action. overflow-hidden clips the image at the rounded corners; avoid clipping the focus indicator of a link positioned too close to that edge. Review article semantics and border radius.
Sources
Reference 1 Reference 2 Reference 3 provide the technical details and current compatibility information.