Interactive Blog Post Preview Card

<a href="#"
  class="group relative block overflow-hidden ring-1 ring-white/10 transition hover:ring-white/20 bg-gradient-to-b from-[#0C0F17] to-[#0A0D14] rounded-2xl">
  <!-- Illustration -->
  <div class="relative">
    <div class="relative mx-3 mt-3 rounded-xl bg-[#0A0E15] ring-1 ring-white/10 overflow-hidden">
      <!-- Outer frame inset glow -->
      <div
        class="pointer-events-none absolute inset-0 rounded-xl shadow-[inset_0_0_0_1px_rgba(255,255,255,0.04),inset_0_0_60px_rgba(88,101,242,0.06)]">
      </div>

      <!-- Dotted grid panel -->
      <div class="m-3 rounded-lg ring-1 ring-white/10 relative overflow-hidden">
        <div class="absolute inset-0" style="
                background-image: radial-gradient(rgba(148,163,184,0.14) 1px, transparent 1px);
                background-size: 12px 12px;
                background-position: 0 0;
             "></div>

        <!-- Left window -->
        <div
          class="absolute left-3 bottom-4 h-24 w-36 backdrop-blur-[1px] z-10 shadow-[0_2px_12px_rgba(0,0,0,0.25)] transition-transform duration-300 ease-out group-hover:-translate-y-0.5 border-white/15 border rounded-md backdrop-blur-md">
          <!-- top bar -->
          <div class="h-5 border-b border-white/10 bg-white/[0.03]">
            <div class="h-full px-2 flex items-center gap-1.5">
              <div class="h-2 w-8 rounded-sm bg-white/25"></div>
            </div>
          </div>
          <!-- grid lines -->
          <div class="pt-2 pr-2 pb-2 pl-2">
            <div class="h-16 w-full rounded border border-white/10 relative">
              <div class="absolute inset-0 grid grid-cols-3 grid-rows-3">
                <div class="border-r border-b border-white/10"></div>
                <div class="border-r border-b border-white/10"></div>
                <div class="border-b border-white/10"></div>
                <div class="border-r border-b border-white/10"></div>
                <div class="border-r border-b border-white/10"></div>
                <div class="border-b border-white/10"></div>
                <div class="border-r border-white/10"></div>
                <div class="border-r border-white/10"></div>
                <div class=""></div>
              </div>
            </div>
          </div>
        </div>

        <!-- Right window -->
        <div
          class="absolute right-4 top-5 h-28 w-44 backdrop-blur-[1px] z-10 shadow-[0_2px_12px_rgba(0,0,0,0.25)] transition-transform duration-300 ease-out group-hover:-translate-y-0.5 border-white/15 border rounded-md backdrop-blur-md">
          <!-- top bar -->
          <div class="h-5 border-b border-white/10 bg-white/[0.03]">
            <div class="h-full px-2 flex items-center gap-1.5">
              <div class="h-2 w-10 rounded-sm bg-white/25"></div>
            </div>
          </div>
          <div class="pt-3 pr-3 pb-3 pl-3">
            <!-- globe -->
            <div class="relative mx-auto h-14 w-14 rounded-full border border-white/25">
              <div class="absolute inset-0 rounded-full ring-1 ring-white/10"></div>
              <div class="absolute inset-0">
                <div class="absolute left-1/2 top-0 h-full border-l border-white/15 -translate-x-1/2"></div>
                <div class="absolute left-1/3 top-0 h-full border-l border-white/10 -translate-x-1/2"></div>
                <div class="absolute left-2/3 top-0 h-full border-l border-white/10 -translate-x-1/2"></div>
                <div class="absolute top-1/2 left-0 w-full border-t border-white/15 -translate-y-1/2"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- Center window (focus) -->
        <div
          class="absolute left-1/2 top-7 w-[65%] max-w-[340px] -translate-x-1/2 shadow-[0_0_0_1px_rgba(99,102,241,0.30),0_0_40px_rgba(67,56,202,0.25)] transition-all duration-300 z-20 group-hover:-translate-y-0.5 group-hover:shadow-[0_0_0_1px_rgba(129,140,248,0.45),0_0_60px_rgba(99,102,241,0.35)] bg-[#0B1020]/50 border-indigo-400/50 border rounded-md backdrop-blur-md translate-y-2">
          <!-- header lines -->
          <div class="h-6 border-b border-indigo-300/30 bg-indigo-300/5">
            <div class="h-full px-3 flex items-center gap-1.5">
              <div class="h-1.5 w-16 rounded-sm bg-indigo-300/70"></div>
              <div class="h-1.5 w-8 rounded-sm bg-indigo-300/40"></div>
            </div>
          </div>
          <!-- content lines -->
          <div class="pt-4 pr-4 pb-4 pl-4 space-y-2">
            <div class="h-2 w-1/2 rounded bg-white/60"></div>
            <div class="h-2 w-2/3 rounded bg-white/30"></div>
            <div class="h-2 w-1/3 rounded bg-white/20"></div>
          </div>
        </div>

        <!-- subtle vignette -->
        <div class="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/20">
        </div>

        <!-- aspect spacer (slightly smaller) -->
        <div class="invisible block pt-[45%]"></div>
      </div>
    </div>
  </div>

  <!-- Meta -->
  <div class="sm:p-5 pt-4 pr-4 pb-4 pl-4">
    <div class="mb-2 flex items-center gap-2 text-sm text-slate-400">
      <div class="flex items-center gap-1.5">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="sparkles"
          class="lucide lucide-sparkles h-3.5 w-3.5 text-slate-400">
          <path
            d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z">
          </path>
          <path d="M20 2v4"></path>
          <path d="M22 4h-4"></path>
          <circle cx="4" cy="20" r="2"></circle>
        </svg>
        <span class="sr-only">Category:</span>
        <span class="text-slate-300/90">AI &amp; Product</span>
      </div>
      <span class="text-slate-500">·</span>
      <div class="flex items-center gap-1.5">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="calendar"
          class="lucide lucide-calendar h-3.5 w-3.5 text-slate-400">
          <path d="M8 2v4"></path>
          <path d="M16 2v4"></path>
          <rect width="18" height="18" x="3" y="4" rx="2"></rect>
          <path d="M3 10h18"></path>
        </svg>

      </div>
      <span class="text-slate-500 hidden sm:inline">·</span>
      <div class="hidden sm:flex items-center gap-1.5">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="clock"
          class="lucide lucide-clock h-3.5 w-3.5 text-slate-400">
          <path d="M12 6v6l4 2"></path>
          <circle cx="12" cy="12" r="10"></circle>
        </svg>
        <span class="text-slate-300/90">5 min</span>
      </div>
    </div>
    <h3 class="font-semibold text-slate-100 tracking-tight text-lg">
      Designing intelligent interfaces
    </h3>
    <div class="mt-3 flex items-center gap-3">
      <div
        class="grid h-8 w-8 place-items-center ring-1 ring-white/10 text-sm font-medium text-slate-200 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7206b228-1279-4d12-b408-6a9e34152341_320w.jpg)] bg-cover rounded-full">
      </div>
      <div class="text-sm">
        <p class="font-medium text-slate-200/90">Alex Rivera</p>
        <p class="text-slate-400">Patterns, tokens, and agent UX</p>
      </div>
      <div class="ml-auto hidden sm:flex items-center gap-2">
        <span class="rounded-full bg-white/[0.02] px-2.5 py-1 text-xs text-slate-300 ring-1 ring-white/10">Guide</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
          data-lucide="arrow-up-right"
          class="lucide lucide-arrow-up-right h-4 w-4 text-slate-300 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5">
          <path d="M7 7h10v10"></path>
          <path d="M7 17 17 7"></path>
        </svg>
      </div>
    </div>
  </div>

  <!-- Hover outline -->
  <div
    class="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-transparent transition group-hover:ring-indigo-400/30">
  </div>
</a>