API Key Card

<!--
  Day 116: API key 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
-->

<!-- API Key Card -->
<div
  class="mx-auto w-full max-w-md rounded-3xl bg-white p-6 shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5"
>
  <!-- Header -->
  <div class="flex items-start justify-between gap-4">
    <div class="flex items-center gap-3">
      <div
        class="flex size-11 flex-none items-center justify-center rounded-xl bg-zinc-900 text-white"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          class="hi-solid hi-key inline-block size-6"
        >
          <path
            fill-rule="evenodd"
            d="M15.75 1.5a6.75 6.75 0 0 0-6.651 7.906c.067.39-.032.717-.221.906l-6.5 6.499a3 3 0 0 0-.878 2.121v2.818c0 .414.336.75.75.75H6a.75.75 0 0 0 .75-.75v-1.5h1.5A.75.75 0 0 0 9 19.5V18h1.5a.75.75 0 0 0 .53-.22l2.658-2.658c.19-.189.517-.288.906-.22A6.75 6.75 0 1 0 15.75 1.5Zm0 3a.75.75 0 0 0 0 1.5A2.25 2.25 0 0 1 18 8.25a.75.75 0 0 0 1.5 0 3.75 3.75 0 0 0-3.75-3.75Z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <div>
        <h3 class="text-sm font-semibold text-zinc-900">Production Key</h3>
        <p class="text-xs text-zinc-500">Created Mar 14, 2026</p>
      </div>
    </div>
    <span
      class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-2.5 py-1 text-xs font-semibold text-emerald-700 ring-1 ring-emerald-200/70 ring-inset"
    >
      <span class="size-1.5 rounded-full bg-emerald-500"></span>
      Active
    </span>
  </div>
  <!-- END Header -->

  <!-- Key Field -->
  <div class="mt-6">
    <label class="text-xs font-medium text-zinc-500" for="api-key"
      >Secret key</label
    >
    <div
      class="mt-2 flex items-stretch gap-2 rounded-xl border border-zinc-200 bg-zinc-50 p-1.5 focus-within:border-indigo-500 focus-within:ring-2 focus-within:ring-indigo-500/20"
    >
      <input
        id="api-key"
        type="text"
        readonly
        value="sk_live_••••••••••••••••••••a7f3"
        class="grow bg-transparent px-3 py-1.5 font-mono text-sm tracking-tight text-zinc-700 focus:outline-hidden"
      />
      <button
        type="button"
        aria-label="Reveal key"
        class="flex flex-none items-center justify-center rounded-lg px-2 text-zinc-500 hover:bg-white hover:text-zinc-900 active:bg-zinc-100"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="hi-mini hi-eye inline-block size-5"
        >
          <path d="M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
          <path
            fill-rule="evenodd"
            d="M.664 10.59a1.651 1.651 0 0 1 0-1.186A10.004 10.004 0 0 1 10 3c4.257 0 7.893 2.66 9.336 6.41.147.381.146.804 0 1.186A10.004 10.004 0 0 1 10 17c-4.257 0-7.893-2.66-9.336-6.41ZM14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"
            clip-rule="evenodd"
          />
        </svg>
      </button>
      <button
        type="button"
        class="flex flex-none items-center gap-1.5 rounded-lg bg-white px-3 py-1.5 text-xs font-semibold text-zinc-700 ring-1 ring-zinc-200 ring-inset hover:bg-zinc-50 active:bg-zinc-100"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          class="hi-mini hi-document-duplicate inline-block size-4 opacity-75"
        >
          <path
            d="M7 3.5A1.5 1.5 0 0 1 8.5 2h3.879a1.5 1.5 0 0 1 1.06.44l3.122 3.12A1.5 1.5 0 0 1 17 6.622V12.5a1.5 1.5 0 0 1-1.5 1.5h-1v-3.379a3 3 0 0 0-.879-2.121L10.5 5.379A3 3 0 0 0 8.379 4.5H7v-1Z"
          />
          <path
            d="M4.5 6A1.5 1.5 0 0 0 3 7.5v9A1.5 1.5 0 0 0 4.5 18h7a1.5 1.5 0 0 0 1.5-1.5v-5.879a1.5 1.5 0 0 0-.44-1.06L9.44 6.439A1.5 1.5 0 0 0 8.378 6H4.5Z"
          />
        </svg>
        <span>Copy</span>
      </button>
    </div>
  </div>
  <!-- END Key Field -->

  <!-- Permissions -->
  <div class="mt-6">
    <p class="text-xs font-medium text-zinc-500">Permissions</p>
    <div class="mt-3 flex flex-wrap gap-2">
      <span
        class="inline-flex items-center gap-1 rounded-md bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-indigo-200/70 ring-inset"
      >
        read:users
      </span>
      <span
        class="inline-flex items-center gap-1 rounded-md bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-indigo-200/70 ring-inset"
      >
        write:users
      </span>
      <span
        class="inline-flex items-center gap-1 rounded-md bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-indigo-200/70 ring-inset"
      >
        read:billing
      </span>
      <span
        class="inline-flex items-center gap-1 rounded-md bg-zinc-100 px-2 py-1 text-xs font-medium text-zinc-600 ring-1 ring-zinc-200 ring-inset"
      >
        +4 more
      </span>
    </div>
  </div>
  <!-- END Permissions -->

  <!-- Metadata -->
  <div class="mt-6 grid grid-cols-2 gap-3">
    <div class="rounded-2xl bg-zinc-50 p-4 ring-1 ring-zinc-200/70 ring-inset">
      <p class="text-xs font-medium text-zinc-500">Last used</p>
      <p class="mt-1 text-sm font-semibold text-zinc-900">2 hours ago</p>
      <p class="mt-0.5 text-xs text-zinc-500">api.example.com</p>
    </div>
    <div class="rounded-2xl bg-zinc-50 p-4 ring-1 ring-zinc-200/70 ring-inset">
      <p class="text-xs font-medium text-zinc-500">Requests</p>
      <p class="mt-1 text-sm font-semibold text-zinc-900">128,402</p>
      <p class="mt-0.5 text-xs text-emerald-600">+12.4% this week</p>
    </div>
  </div>
  <!-- END Metadata -->

  <!-- Footer -->
  <div
    class="mt-6 flex items-center justify-between border-t border-dashed border-zinc-200 pt-5"
  >
    <button
      type="button"
      class="inline-flex items-center gap-1.5 px-2.5 py-1.75 text-sm font-semibold text-rose-600 hover:text-rose-700"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        fill="currentColor"
        class="hi-micro hi-trash inline-block size-4"
      >
        <path
          fill-rule="evenodd"
          d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z"
          clip-rule="evenodd"
        />
      </svg>
      <span>Revoke</span>
    </button>
    <button
      type="button"
      class="inline-flex items-center gap-1.5 rounded-lg bg-zinc-900 px-2.5 py-1.75 text-sm font-medium text-white hover:bg-zinc-700 active:bg-zinc-800"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        fill="currentColor"
        class="hi-micro hi-arrow-path inline-block size-4 opacity-50"
      >
        <path
          fill-rule="evenodd"
          d="M13.836 2.477a.75.75 0 0 1 .75.75v3.182a.75.75 0 0 1-.75.75h-3.182a.75.75 0 0 1 0-1.5h1.37l-.84-.841a4.5 4.5 0 0 0-7.08.932.75.75 0 0 1-1.3-.75 6 6 0 0 1 9.44-1.242l.842.84V3.227a.75.75 0 0 1 .75-.75Zm-.911 7.5A.75.75 0 0 1 13.199 11a6 6 0 0 1-9.44 1.241l-.84-.84v1.371a.75.75 0 0 1-1.5 0V9.591a.75.75 0 0 1 .75-.75H5.35a.75.75 0 0 1 0 1.5H3.98l.841.841a4.5 4.5 0 0 0 7.08-.932.75.75 0 0 1 1.025-.273Z"
          clip-rule="evenodd"
        />
      </svg>
      <span>Rotate key</span>
    </button>
  </div>
  <!-- END Footer -->
</div>
<!-- END API Key Card -->