Back to marketing components
Empty Content
Empty content components for Tailwind CSS. Engagement-focused patterns for marketing sites and e-commerce with friendly messaging and exploration-oriented actions, helping users discover related content and stay engaged.
5/5 Dark Mode Updated: Jul 4, 2026
<div class="max-w-md text-center">
<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="mx-auto size-20 text-gray-400"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"
/>
</svg>
<h2 class="mt-6 text-2xl font-bold text-gray-900">Hmm, nothing found</h2>
<p class="mt-4 text-pretty text-gray-700">
We couldn't find what you were looking for. Try a different search term or explore our
popular categories.
</p>
<div class="mt-6 space-y-2">
<a
href="#"
class="block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
>
Browse Popular Items
</a>
<a
href="#"
class="block w-full rounded-lg border border-indigo-600 px-6 py-3 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50"
>
Refine Search
</a>
</div>
<p class="mt-6 text-sm text-gray-700">
Popular searches: <a href="#" class="text-indigo-600 hover:underline">Trending</a>,
<a href="#" class="text-indigo-600 hover:underline">New</a>,
<a href="#" class="text-indigo-600 hover:underline">Best sellers</a>
</p>
</div><div class="max-w-md text-center">
<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="mx-auto size-20 text-gray-400 dark:text-gray-500"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"
/>
</svg>
<h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">Hmm, nothing found</h2>
<p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
We couldn't find what you were looking for. Try a different search term or explore our
popular categories.
</p>
<div class="mt-6 space-y-2">
<a
href="#"
class="block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
>
Browse Popular Items
</a>
<a
href="#"
class="block w-full rounded-lg border border-indigo-600 px-6 py-3 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50 dark:border-gray-800 dark:text-white dark:hover:bg-gray-800"
>
Refine Search
</a>
</div>
<p class="mt-6 text-sm text-gray-700 dark:text-gray-200">
Popular searches:
<a href="#" class="text-indigo-600 hover:underline dark:text-indigo-300">Trending</a>,
<a href="#" class="text-indigo-600 hover:underline dark:text-indigo-300">New</a>,
<a href="#" class="text-indigo-600 hover:underline dark:text-indigo-300">Best sellers</a>
</p>
</div><div class="max-w-md text-center">
<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="mx-auto size-20 text-gray-400"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"
/>
</svg>
<h2 class="mt-6 text-2xl font-bold text-gray-900">Hmm, nothing found</h2>
<p class="mt-4 text-pretty text-gray-700">
We couldn't find what you were looking for. Try a different search term or explore our
popular categories.
</p>
<div class="mt-6 space-y-2">
<a
href="#"
class="block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
>
Browse Popular Items
</a>
<a
href="#"
class="block w-full rounded-lg border border-indigo-600 px-6 py-3 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50"
>
Refine Search
</a>
</div>
<p class="mt-6 flex flex-wrap justify-center gap-8 text-sm">
<a href="#" class="text-indigo-600 hover:underline">Trending</a>
<a href="#" class="text-indigo-600 hover:underline">New</a>
<a href="#" class="text-indigo-600 hover:underline">Best sellers</a>
</p>
</div><div class="max-w-md text-center">
<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="mx-auto size-20 text-gray-400 dark:text-gray-500"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z"
/>
</svg>
<h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">Hmm, nothing found</h2>
<p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
We couldn't find what you were looking for. Try a different search term or explore our
popular categories.
</p>
<div class="mt-6 space-y-2">
<a
href="#"
class="block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
>
Browse Popular Items
</a>
<a
href="#"
class="block w-full rounded-lg border border-indigo-600 px-6 py-3 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50 dark:border-gray-800 dark:text-white dark:hover:bg-gray-800"
>
Refine Search
</a>
</div>
<p class="mt-6 flex flex-wrap justify-center gap-8 text-sm">
<a href="#" class="text-indigo-600 hover:underline dark:text-indigo-300">Trending</a>
<a href="#" class="text-indigo-600 hover:underline dark:text-indigo-300">New</a>
<a href="#" class="text-indigo-600 hover:underline dark:text-indigo-300">Best sellers</a>
</p>
</div><div class="max-w-md text-center">
<h2 class="text-2xl font-bold text-gray-900">Coming soon!</h2>
<p class="mt-4 text-pretty text-gray-700">
We're working on something exciting. Be the first to know when it launches.
</p>
<form class="mt-6 space-y-2">
<input
type="email"
placeholder="your@email.com"
class="w-full rounded-lg border-gray-300 px-4 py-3 text-sm focus:border-indigo-500 focus:outline-none"
/>
<button
class="block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
>
Notify Me
</button>
</form>
<p class="mt-6 text-sm text-gray-700">We'll let you know the moment it's available.</p>
</div><div class="max-w-md text-center">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Coming soon!</h2>
<p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
We're working on something exciting. Be the first to know when it launches.
</p>
<form class="mt-6 space-y-2">
<input
type="email"
placeholder="your@email.com"
class="w-full rounded-lg border-gray-300 px-4 py-3 text-sm focus:border-indigo-500 focus:outline-none dark:border-gray-600 dark:bg-gray-900 dark:text-white"
/>
<button
class="block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
>
Notify Me
</button>
</form>
<p class="mt-6 text-sm text-gray-700 dark:text-gray-200">
We'll let you know the moment it's available.
</p>
</div><div class="max-w-md text-center">
<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="mx-auto size-20 text-gray-400"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
/>
</svg>
<h2 class="mt-6 text-2xl font-bold text-gray-900">Explore more</h2>
<p class="mt-4 text-pretty text-gray-700">
This section doesn't have content right now. Discover related topics and inspiration
instead.
</p>
<div class="mt-6 space-y-2">
<a
href="#"
class="block rounded-lg border border-gray-300 bg-white p-4 text-left transition-colors hover:bg-gray-50"
>
<h3 class="font-medium text-gray-900">Featured Collection</h3>
<p class="mt-1 text-sm text-gray-600">Browse our curated selection</p>
</a>
<a
href="#"
class="block rounded-lg border border-gray-300 bg-white p-4 text-left transition-colors hover:bg-gray-50"
>
<h3 class="font-medium text-gray-900">Latest Trends</h3>
<p class="mt-1 text-sm text-gray-600">See what's trending now</p>
</a>
</div>
<a
href="#"
class="mt-6 block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
>
Back to Shopping
</a>
</div><div class="max-w-md text-center">
<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="mx-auto size-20 text-gray-400 dark:text-gray-500"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
/>
</svg>
<h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">Explore more</h2>
<p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
This section doesn't have content right now. Discover related topics and inspiration
instead.
</p>
<div class="mt-6 space-y-2">
<a
href="#"
class="block rounded-lg border border-gray-300 bg-white p-4 text-left transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800"
>
<h3 class="font-medium text-gray-900 dark:text-white">Featured Collection</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">Browse our curated selection</p>
</a>
<a
href="#"
class="block rounded-lg border border-gray-300 bg-white p-4 text-left transition-colors hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:hover:bg-gray-800"
>
<h3 class="font-medium text-gray-900 dark:text-white">Latest Trends</h3>
<p class="mt-1 text-sm text-gray-600 dark:text-gray-300">See what's trending now</p>
</a>
</div>
<a
href="#"
class="mt-6 block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
>
Back to Shopping
</a>
</div><div class="max-w-md text-center">
<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="mx-auto size-20 text-gray-400"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
/>
</svg>
<h2 class="mt-6 text-2xl font-bold text-gray-900">Out of stock</h2>
<p class="mt-4 text-pretty text-gray-700">
This item is currently unavailable. Check back soon or explore similar products.
</p>
<div class="mt-6 space-y-2">
<a
href="#"
class="block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
>
Notify When Available
</a>
<a
href="#"
class="block w-full rounded-lg border border-indigo-600 px-6 py-3 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50"
>
Explore Similar Products
</a>
</div>
<p class="mt-6 text-sm text-gray-700">
Last restocked: <span class="font-medium"> 3 weeks ago </span>
</p>
</div><div class="max-w-md text-center">
<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="mx-auto size-20 text-gray-400 dark:text-gray-500"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z"
/>
</svg>
<h2 class="mt-6 text-2xl font-bold text-gray-900 dark:text-white">Out of stock</h2>
<p class="mt-4 text-pretty text-gray-700 dark:text-gray-200">
This item is currently unavailable. Check back soon or explore similar products.
</p>
<div class="mt-6 space-y-2">
<a
href="#"
class="block w-full rounded-lg bg-indigo-600 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
>
Notify When Available
</a>
<a
href="#"
class="block w-full rounded-lg border border-indigo-600 px-6 py-3 text-sm font-medium text-indigo-600 transition-colors hover:bg-indigo-50 dark:border-gray-800 dark:text-white dark:hover:bg-gray-800"
>
Explore Similar Products
</a>
</div>
<p class="mt-6 text-sm text-gray-700 dark:text-gray-200">
Last restocked: <span class="font-medium"> 3 weeks ago </span>
</p>
</div>