Back to marketing components
Cards
Explore a variety of card components designed with Tailwind CSS. These responsive, SEO-friendly cards are ideal for showcasing content, products, blog posts, and user profiles on modern marketing websites and applications. Fully customizable for any project.
0/9 Dark Mode (Request)Updated: Jul 4, 2026
<a href="#" class="block rounded-md border border-gray-300 p-4 shadow-sm sm:p-6">
<div class="sm:flex sm:justify-between sm:gap-4 lg:gap-6">
<div class="sm:order-last sm:shrink-0">
<img
alt=""
src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&q=80&w=1160"
class="size-16 rounded-full object-cover sm:size-18"
/>
</div>
<div class="mt-4 sm:mt-0">
<h3 class="text-lg font-medium text-pretty text-gray-900">
How I built my first website with Nuxt, Tailwind CSS and Vercel
</h3>
<p class="mt-1 text-sm text-gray-700">By John Doe</p>
<p class="mt-4 line-clamp-2 text-sm text-pretty text-gray-700">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. At velit illum provident a,
ipsa maiores deleniti consectetur nobis et eaque.
</p>
</div>
</div>
<dl class="mt-6 flex gap-4 lg:gap-6">
<div class="flex items-center gap-2">
<dt class="text-gray-700">
<span class="sr-only"> Published on </span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5"
/>
</svg>
</dt>
<dd class="text-xs text-gray-700">31/06/2025</dd>
</div>
<div class="flex items-center gap-2">
<dt class="text-gray-700">
<span class="sr-only"> Reading time </span>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
/>
</svg>
</dt>
<dd class="text-xs text-gray-700">12 minutes</dd>
</div>
</dl>
</a><a href="#" class="block">
<img
alt=""
src="https://images.unsplash.com/photo-1605721911519-3dfeb3be25e7?auto=format&fit=crop&q=80&w=1160"
class="h-64 w-full object-cover sm:h-80 lg:h-96"
/>
<h3 class="mt-4 text-lg font-bold text-gray-900 sm:text-xl">Lorem, ipsum dolor.</h3>
<p class="mt-2 max-w-sm text-gray-700">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni reiciendis sequi ipsam
incidunt.
</p>
</a><a href="#" class="group relative block bg-black">
<img
alt=""
src="https://images.unsplash.com/photo-1603871165848-0aa92c869fa1?auto=format&fit=crop&q=80&w=1160"
class="absolute inset-0 h-full w-full object-cover opacity-75 transition-opacity group-hover:opacity-50"
/>
<div class="relative p-4 sm:p-6 lg:p-8">
<p class="text-sm font-medium tracking-widest text-pink-500 uppercase">Developer</p>
<p class="text-xl font-bold text-white sm:text-2xl">Tony Wayne</p>
<div class="mt-32 sm:mt-48 lg:mt-64">
<div
class="translate-y-8 transform opacity-0 transition-all group-hover:translate-y-0 group-hover:opacity-100"
>
<p class="text-sm text-white">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis perferendis hic
asperiores quibusdam quidem voluptates doloremque reiciendis nostrum harum.
Repudiandae?
</p>
</div>
</div>
</div>
</a><a href="#" class="group relative block h-64 sm:h-80 lg:h-96">
<span class="absolute inset-0 border-2 border-dashed border-black"></span>
<div
class="relative flex h-full transform items-end border-2 border-black bg-white transition-transform group-hover:-translate-x-2 group-hover:-translate-y-2"
>
<div
class="px-4 pb-4 transition-opacity group-hover:absolute group-hover:opacity-0 sm:px-6 sm:pb-4 lg:px-8 lg:pb-8"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-10 sm:size-12"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<h2 class="mt-4 text-xl font-medium sm:text-2xl">Go around the world</h2>
</div>
<div
class="absolute p-4 opacity-0 transition-opacity group-hover:relative group-hover:opacity-100 sm:p-6 lg:p-8"
>
<h3 class="mt-4 text-xl font-medium sm:text-2xl">Go around the world</h3>
<p class="mt-4 text-sm sm:text-base">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate, praesentium
voluptatem omnis atque culpa repellendus.
</p>
<p class="mt-8 font-bold">Read more</p>
</div>
</div>
</a><a href="#" class="block rounded-lg p-4 shadow-xs shadow-indigo-100">
<img
alt=""
src="https://images.unsplash.com/photo-1613545325278-f24b0cae1224?auto=format&fit=crop&q=80&w=1160"
class="h-56 w-full rounded-md object-cover"
/>
<div class="mt-2">
<dl>
<div>
<dt class="sr-only">Price</dt>
<dd class="text-sm text-gray-500">$240,000</dd>
</div>
<div>
<dt class="sr-only">Address</dt>
<dd class="font-medium">123 Wallaby Avenue, Park Road</dd>
</div>
</dl>
<div class="mt-6 flex items-center gap-8 text-xs">
<div class="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
<svg
aria-hidden="true"
class="size-4 text-indigo-700"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z"
/>
</svg>
<div class="mt-1.5 sm:mt-0">
<p class="text-gray-500">Parking</p>
<p class="font-medium">2 spaces</p>
</div>
</div>
<div class="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
<svg
aria-hidden="true"
class="size-4 text-indigo-700"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"
/>
</svg>
<div class="mt-1.5 sm:mt-0">
<p class="text-gray-500">Bathroom</p>
<p class="font-medium">2 rooms</p>
</div>
</div>
<div class="sm:inline-flex sm:shrink-0 sm:items-center sm:gap-2">
<svg
aria-hidden="true"
class="size-4 text-indigo-700"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
/>
</svg>
<div class="mt-1.5 sm:mt-0">
<p class="text-gray-500">Bedroom</p>
<p class="font-medium">4 rooms</p>
</div>
</div>
</div>
</div>
</a><article class="rounded-xl border border-gray-700 bg-gray-800 p-4">
<div class="flex items-center gap-4">
<img
alt=""
src="https://images.unsplash.com/photo-1614644147724-2d4785d69962?auto=format&fit=crop&q=80&w=1160"
class="size-16 rounded-full object-cover"
/>
<div>
<h3 class="text-lg font-medium text-white">Claire Mac</h3>
<div class="flow-root">
<ul class="-m-1 flex flex-wrap">
<li class="p-1 leading-none">
<a href="#" class="text-xs font-medium text-gray-300"> Twitter </a>
</li>
<li class="p-1 leading-none">
<a href="#" class="text-xs font-medium text-gray-300"> GitHub </a>
</li>
<li class="p-1 leading-none">
<a href="#" class="text-xs font-medium text-gray-300">Website</a>
</li>
</ul>
</div>
</div>
</div>
<ul class="mt-4 space-y-2">
<li>
<a
href="#"
class="block h-full rounded-lg border border-gray-700 p-4 hover:border-pink-600"
>
<strong class="font-medium text-white">Project A</strong>
<p class="mt-1 text-xs font-medium text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime consequuntur deleniti,
unde ab ut in!
</p>
</a>
</li>
<li>
<a
href="#"
class="block h-full rounded-lg border border-gray-700 p-4 hover:border-pink-600"
>
<strong class="font-medium text-white">Project B</strong>
<p class="mt-1 text-xs font-medium text-gray-300">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente cumque saepe sit.
</p>
</a>
</li>
</ul>
</article><a href="#" class="block">
<img
alt=""
src="https://images.unsplash.com/photo-1588515724527-074a7a56616c?auto=format&fit=crop&q=80&w=1160"
class="h-56 w-full rounded-se-3xl rounded-es-3xl object-cover sm:h-64 lg:h-72"
/>
<div class="mt-4 sm:flex sm:items-center sm:justify-center sm:gap-4">
<strong class="font-medium">Company Name</strong>
<span class="hidden sm:block sm:h-px sm:w-8 sm:bg-yellow-500"></span>
<p class="mt-0.5 opacity-50 sm:mt-0">Branding / Signage</p>
</div>
</a><article class="rounded-xl bg-white p-4 ring-3 ring-indigo-50 sm:p-6 lg:p-8">
<div class="flex items-start sm:gap-8">
<div
class="hidden sm:grid sm:size-20 sm:shrink-0 sm:place-content-center sm:rounded-full sm:border-2 sm:border-indigo-500"
aria-hidden="true"
>
<div class="flex items-center gap-1">
<span class="h-8 w-0.5 rounded-full bg-indigo-500"></span>
<span class="h-6 w-0.5 rounded-full bg-indigo-500"></span>
<span class="h-4 w-0.5 rounded-full bg-indigo-500"></span>
<span class="h-6 w-0.5 rounded-full bg-indigo-500"></span>
<span class="h-8 w-0.5 rounded-full bg-indigo-500"></span>
</div>
</div>
<div>
<strong
class="rounded-sm border border-indigo-500 bg-indigo-500 px-3 py-1.5 text-[10px] font-medium text-white"
>
Episode #101
</strong>
<h3 class="mt-4 text-lg font-medium sm:text-xl">
<a href="#" class="hover:underline"> Some Interesting Podcast Title </a>
</h3>
<p class="mt-1 text-sm text-gray-700">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsam nulla amet voluptatum
sit rerum, atque, quo culpa ut necessitatibus eius suscipit eum accusamus, aperiam
voluptas exercitationem facere aliquid fuga. Sint.
</p>
<div class="mt-4 sm:flex sm:items-center sm:gap-2">
<div class="flex items-center gap-1 text-gray-500">
<svg
aria-hidden="true"
class="size-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<p class="text-xs font-medium">48:32 minutes</p>
</div>
<span class="hidden sm:block" aria-hidden="true">·</span>
<p class="mt-2 text-xs font-medium text-gray-500 sm:mt-0">
Featuring-3
<a href="#" class="underline hover:text-gray-700">Barry</a>,
<a href="#" class="underline hover:text-gray-700">Sandra</a> and
<a href="#" class="underline hover:text-gray-700">August</a>
</p>
</div>
</div>
</div>
</article><article class="rounded-xl border-2 border-gray-100 bg-white">
<div class="flex items-start gap-4 p-4 sm:p-6 lg:p-8">
<a href="#" class="block shrink-0">
<img
alt=""
src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?auto=format&fit=crop&q=80&w=1160"
class="size-14 rounded-lg object-cover"
/>
</a>
<div>
<h3 class="font-medium sm:text-lg">
<a href="#" class="hover:underline"> Question about Rendering </a>
</h3>
<p class="line-clamp-2 text-sm text-gray-700">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, accusantium
temporibus iure delectus ut totam natus nesciunt ex? Ducimus, enim.
</p>
<div class="mt-2 sm:flex sm:items-center sm:gap-2">
<div class="flex items-center gap-1 text-gray-500">
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z"
/>
</svg>
<p class="text-xs">14 comments</p>
</div>
<span class="hidden sm:block" aria-hidden="true">·</span>
<p class="hidden sm:block sm:text-xs sm:text-gray-500">
Posted by
<a href="#" class="font-medium underline hover:text-gray-700"> John </a>
</p>
</div>
</div>
</div>
<div class="flex justify-end">
<strong
class="-me-0.5 -mb-0.5 inline-flex items-center gap-1 rounded-ss-xl rounded-ee-xl bg-green-600 px-3 py-1.5 text-white"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="2"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
/>
</svg>
<span class="text-[10px] font-medium sm:text-xs">Solved!</span>
</strong>
</div>
</article>