Deployment Card

<!--
  Day 71: Deployment Card

  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
-->

<!-- Deployment Card -->
<div
  class="relative mx-auto w-full max-w-sm rounded-xl border border-zinc-200 bg-white ring-4 ring-zinc-300/25"
>
  <div class="flex flex-col gap-6 px-6 py-10 sm:px-10 sm:py-14">
    <!-- Header -->
    <div class="text-center">
      <div
        class="relative mx-auto mb-4 flex size-14 items-center justify-center rounded-full bg-purple-600 text-white ring-4 ring-purple-500/25"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="hi-outline hi-check inline-block size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="m4.5 12.75 6 6 9-13.5"
          />
        </svg>
      </div>
      <h2 class="text-2xl font-extrabold text-zinc-900">
        Your project is live!
      </h2>
      <p class="mt-2 text-sm/relaxed text-zinc-600">
        Your project has been successfully deployed and is now live.
      </p>
    </div>
    <!-- END Header -->

    <!-- Stats -->
    <div class="flex flex-col gap-2">
      <div
        class="flex items-center justify-between rounded-lg bg-zinc-50 p-4 text-sm"
      >
        <div class="flex items-center gap-3">
          <div class="size-2 rounded-full bg-emerald-500"></div>
          <span class="font-medium text-zinc-700">Build Status</span>
        </div>
        <span class="font-semibold text-emerald-600">Success</span>
      </div>
      <div
        class="flex items-center justify-between rounded-lg bg-zinc-50 p-4 text-sm"
      >
        <div class="flex items-center gap-3">
          <div class="size-2 rounded-full bg-orange-500"></div>
          <span class="font-medium text-zinc-700">Deploy Time</span>
        </div>
        <span class="font-semibold text-zinc-600">2m 34s</span>
      </div>
      <div
        class="flex items-center justify-between rounded-lg bg-zinc-50 p-4 text-sm"
      >
        <div class="flex items-center gap-3">
          <div class="size-2 rounded-full bg-indigo-500"></div>
          <span class="font-medium text-zinc-700">Environment</span>
        </div>
        <span class="font-semibold text-zinc-600">Production</span>
      </div>
    </div>
    <!-- END Stats -->

    <!-- Actions -->
    <div class="flex gap-2">
      <button
        type="button"
        class="flex grow items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-4 py-3 text-sm leading-5 font-medium text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:ring-2 focus:ring-zinc-500/50 focus:outline-hidden active:border-zinc-700 active:bg-zinc-700"
      >
        View live site
      </button>
      <button
        type="button"
        class="flex items-center justify-center gap-2 rounded-lg border border-zinc-200 bg-white px-4 py-3 text-sm leading-5 font-medium text-zinc-700 hover:border-zinc-300 hover:bg-zinc-50 hover:text-zinc-900 focus:ring-2 focus:ring-zinc-500/50 focus:outline-hidden active:border-zinc-400 active:bg-zinc-100"
      >
        Share
      </button>
    </div>
    <!-- END Actions -->
  </div>
</div>
<!-- END Deployment Card -->