Marketing Empty Content Related content

Live Preview
<div class="max-w-md text-center">
      <svg
        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>

Related components

More items from the merged UI library.

View all