Friendly no-data placeholder
Create an empty-state block with Tailwind CSS: centered content with a rounded icon badge, a heading, a supporting sentence, and a primary action button, optionally a secondary link below. Wrap it in a dashed-border rounded-2xl area to signal an empty container.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .
Create an empty-state block with Tailwind CSS: centered content with a rounded icon badge, a heading, a supporting sentence, and a primary action button, optionally a secondary link below. Wrap it in a dashed-border rounded-2xl area to signal an empty container.<div class="mx-auto max-w-md p-6">
<div class="rounded-2xl border-2 border-dashed border-neutral-200 p-12 text-center">
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-100 text-xl"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6Z"/><path d="M14 3v6h6M8 13h8M8 17h6"/></svg></div>
<h3 class="mt-4 font-semibold text-neutral-900">No projects yet</h3>
<p class="mx-auto mt-1 max-w-xs text-sm text-neutral-500">Create your first project to start collaborating with your team.</p>
<button class="mt-5 rounded-xl bg-neutral-900 px-4 py-2 text-sm font-medium text-white hover:bg-neutral-800">New project</button>
<div class="mt-3"><a href="#" class="text-sm text-neutral-500 hover:underline">or import from a template</a></div>
</div>
</div>