Financial Coverage Summary Card (Tailwind CSS)

<div class="relative w-full max-w-sm sm:max-w-md mr-auto ml-auto">
  <!-- Shadowed card behind -->
  <div class="absolute -z-10 left-6 right-0 top-6 bottom-0 rounded-3xl bg-white/5 ring-1 ring-white/10"></div>

  <!-- Primary card -->
  <div
    class="relative overflow-hidden ring-1 ring-white/10 sm:p-8 bg-white/5 rounded-3xl pt-6 pr-6 pb-6 pl-6 shadow-2xl backdrop-blur-xl">
    <!-- Decorative inner glow -->
    <div class="pointer-events-none absolute -top-24 -left-24 h-64 w-64 rounded-full bg-cyan-400/10 blur-3xl"></div>
    <div class="pointer-events-none absolute -bottom-24 -right-24 h-64 w-64 rounded-full bg-emerald-400/10 blur-3xl">
    </div>

    <!-- Badge -->
    <div class="flex justify-center">
      <div
        class="inline-flex items-center gap-2 rounded-full bg-gradient-to-b from-emerald-400 to-emerald-500 px-4 py-1.5 text-emerald-950 shadow-lg ring-1 ring-white/20">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
          data-lucide="shield-check" class="lucide lucide-shield-check h-4 w-4">
          <path
            d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z">
          </path>
          <path d="m9 12 2 2 4-4"></path>
        </svg>
        <span class="text-xs font-medium">Fully Protected</span>
      </div>
    </div>

    <!-- Title -->
    <h1 class="mt-5 text-center text-4xl font-semibold tracking-tight text-white sm:text-5xl">Cobalt Vault</h1>
    <p class="mt-1 text-center text-sm font-normal text-slate-300 sm:text-base">Multi‑Bank Coverage</p>

    <!-- Amount -->
    <p class="mt-5 text-center text-5xl font-semibold tracking-tight sm:text-6xl">$1,000,000</p>
    <p class="mt-2 text-center text-xs font-medium text-slate-300 sm:text-sm">4× Deposit Insurance Coverage</p>

    <!-- Banks list -->
    <div class="mt-6 space-y-3">
      <div
        class="flex items-center justify-between rounded-xl bg-white/5 px-4 py-3 ring-1 ring-white/10 transition-colors hover:bg-white/10">
        <div class="flex items-center gap-3">
          <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-900/60 ring-1 ring-white/10">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              data-lucide="landmark" class="lucide lucide-landmark h-4 w-4 text-slate-200">
              <path d="M10 18v-7"></path>
              <path
                d="M11.12 2.198a2 2 0 0 1 1.76.006l7.866 3.847c.476.233.31.949-.22.949H3.474c-.53 0-.695-.716-.22-.949z">
              </path>
              <path d="M14 18v-7"></path>
              <path d="M18 18v-7"></path>
              <path d="M3 22h18"></path>
              <path d="M6 18v-7"></path>
            </svg>
          </div>
          <span class="text-sm font-medium text-slate-200">Pacific Trust</span>
        </div>
        <span class="text-sm font-semibold text-slate-100">$250k</span>
      </div>

      <div
        class="flex items-center justify-between rounded-xl bg-white/5 px-4 py-3 ring-1 ring-white/10 transition-colors hover:bg-white/10">
        <div class="flex items-center gap-3">
          <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-900/60 ring-1 ring-white/10">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              data-lucide="landmark" class="lucide lucide-landmark h-4 w-4 text-slate-200">
              <path d="M10 18v-7"></path>
              <path
                d="M11.12 2.198a2 2 0 0 1 1.76.006l7.866 3.847c.476.233.31.949-.22.949H3.474c-.53 0-.695-.716-.22-.949z">
              </path>
              <path d="M14 18v-7"></path>
              <path d="M18 18v-7"></path>
              <path d="M3 22h18"></path>
              <path d="M6 18v-7"></path>
            </svg>
          </div>
          <span class="text-sm font-medium text-slate-200">Orion Savings</span>
        </div>
        <span class="text-sm font-semibold text-slate-100">$250k</span>
      </div>

      <div
        class="flex items-center justify-between rounded-xl bg-white/5 px-4 py-3 ring-1 ring-white/10 transition-colors hover:bg-white/10">
        <div class="flex items-center gap-3">
          <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-900/60 ring-1 ring-white/10">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              data-lucide="landmark" class="lucide lucide-landmark h-4 w-4 text-slate-200">
              <path d="M10 18v-7"></path>
              <path
                d="M11.12 2.198a2 2 0 0 1 1.76.006l7.866 3.847c.476.233.31.949-.22.949H3.474c-.53 0-.695-.716-.22-.949z">
              </path>
              <path d="M14 18v-7"></path>
              <path d="M18 18v-7"></path>
              <path d="M3 22h18"></path>
              <path d="M6 18v-7"></path>
            </svg>
          </div>
          <span class="text-sm font-medium text-slate-200">Harbor Federal</span>
        </div>
        <span class="text-sm font-semibold text-slate-100">$250k</span>
      </div>

      <div
        class="flex items-center justify-between rounded-xl bg-white/5 px-4 py-3 ring-1 ring-white/10 transition-colors hover:bg-white/10">
        <div class="flex items-center gap-3">
          <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-900/60 ring-1 ring-white/10">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              data-lucide="landmark" class="lucide lucide-landmark h-4 w-4 text-slate-200">
              <path d="M10 18v-7"></path>
              <path
                d="M11.12 2.198a2 2 0 0 1 1.76.006l7.866 3.847c.476.233.31.949-.22.949H3.474c-.53 0-.695-.716-.22-.949z">
              </path>
              <path d="M14 18v-7"></path>
              <path d="M18 18v-7"></path>
              <path d="M3 22h18"></path>
              <path d="M6 18v-7"></path>
            </svg>
          </div>
          <span class="text-sm font-medium text-slate-200">Summit National</span>
        </div>
        <span class="text-sm font-semibold text-slate-100">$250k</span>
      </div>
    </div>

    <!-- Note -->
    <p class="mt-5 text-center text-[11px] font-normal leading-5 text-slate-400">
      Example distribution for illustrative purposes. Coverage and partner institutions may change based on
      availability.
    </p>
  </div>
</div>