Vibedex.io
Back to gallery
empty-statesBeginner

Marketing Empty State

A landing-page-style empty state with imagery and CTA.

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a marketing empty state with Tailwind: large illustrative graphic at the top, headline like 'Coming soon', a paragraph of context, and a primary CTA. Centered, generous vertical padding, max-w-2xl content.

Code

html
<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/marketing/empty-content/1.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-marketing-empty
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="flex min-h-screen items-center justify-center p-6 w-full">
<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.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>
</div>