Empty State

<!--
  Day 62: Empty state

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Empty State -->
<div
  class="relative mx-auto w-full max-w-3xl rounded-3xl bg-white/40 p-4 shadow-sm backdrop-blur-xs"
>
  <div class="rounded-2xl bg-white p-6">
    <div
      class="relative rounded-xl border-2 border-dashed border-zinc-200 px-6 py-20 md:py-40"
    >
      <div
        class="absolute inset-0 bg-[repeating-linear-gradient(-45deg,#9ca3af,#9ca3af_3px,transparent_3px,transparent_16px)] opacity-5"
      ></div>
      <div class="relative flex flex-col gap-8 text-center">
        <div>
          <div class="relative inline-flex items-center justify-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              aria-hidden="true"
              class="lucide lucide-check-check inline-block size-12 text-purple-600"
            >
              <path d="M18 6 7 17l-5-5" />
              <path d="m22 10-7.5 7.5L13 16" />
            </svg>
          </div>
          <div class="mt-4 text-center">
            <h3 class="mb-2 text-2xl font-bold">No pending tasks.</h3>
            <p class="text-sm/relaxed font-medium text-zinc-600">
              You are on fire!
            </p>
          </div>
        </div>
        <input
          type="text"
          placeholder="Add a new todo..."
          class="mx-auto block w-full max-w-sm rounded-lg bg-white px-4 py-2.5 text-sm/6 font-medium placeholder-zinc-500 ring-3 ring-zinc-200/50 focus:ring-zinc-300/50 focus:outline-hidden"
        />
      </div>
    </div>
  </div>
</div>
<!-- END Empty State -->