Glassmorphism Feature Card

<div class="rounded-2xl bg-white/5 backdrop-blur-sm p-8 ring-1 ring-white/10 hover:ring-indigo-400/40 hover:bg-white/7.5 transition hover:-translate-y-1.5 duration-300 max-w-sm">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
  <style>body{font-family:"Inter",sans-serif}</style>
  <article aria-labelledby="release-title">
    <header class="space-y-6">
      <span class="uppercase text-xs font-medium tracking-widest text-indigo-300 flex items-center gap-1">
        Release
        <i data-lucide="zap" class="w-4 h-4"></i>
      </span>
      <h3 id="release-title" class="font-semibold text-xl tracking-tight text-white">Realtime Co-Create is live</h3>
      <p class="text-sm text-slate-300">Design scenes together with instant sync—no reloads needed.</p>
    </header>
    <ul class="mt-6 space-y-3 text-sm text-slate-300">
      <li class="flex items-start gap-2">
        Cursor presence & author tags
        <i data-lucide="check-circle" class="w-4 h-4 text-indigo-300"></i>
      </li>
      <li class="flex items-start gap-2">
        Conflict-free mesh merging
        <i data-lucide="check-circle" class="w-4 h-4 text-indigo-300"></i>
      </li>
      <li class="flex items-start gap-2">
        Spatial voice built-in
        <i data-lucide="check-circle" class="w-4 h-4 text-indigo-300"></i>
      </li>
    </ul>
    <details class="mt-6 text-sm text-slate-300">
      <summary class="cursor-pointer select-none font-medium text-indigo-300 hover:underline">Details</summary>
      <div class="mt-3 space-y-2 leading-relaxed">
        <p>
          With realtime co-creation, teams can collaborate in the same 3D scene simultaneously, seeing each other's cursors and changes live.
        </p>
        <p>Our conflict-free mesh merging technology ensures edits from multiple users integrate seamlessly.</p>
        <p>Spatial voice allows natural communication in the scene, with audio adjusting based on proximity.</p>
      </div>
    </details>
    <a href="#" class="inline-flex items-center gap-1 text-indigo-300 text-sm font-medium mt-6 hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-300">
      View Changelog
      <i data-lucide="arrow-right" class="w-4 h-4"></i>
    </a>
  </article>
  <script defer="" src="https://unpkg.com/lucide@latest"></script>
  <script>document.addEventListener("DOMContentLoaded",()=>{lucide.createIcons();});</script>
</div>