Frosted Glass Code Snippet Card with Tabs & CTAs

<div
  class="relative md:p-6 ring-1 ring-white/20 shadow-[0_10px_30px_-12px_rgba(0,0,0,0.5)] text-neutral-100 bg-white/5 bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/f2faab95-c606-4a4d-bb85-1cf4d3e9d245_1600w.jpg)] bg-cover rounded-3xl pt-5 pr-5 pb-5 pl-5 backdrop-blur-xl">
  <!-- Tabs -->
  <div class="mb-4 flex flex-wrap items-center gap-2">
    <span class="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/10 backdrop-blur-sm px-3 py-1.5 text-xs font-medium text-neutral-100">
                <span class="inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
    Quick Start
    </span>
    <span class="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/5 backdrop-blur-sm px-3 py-1.5 text-xs font-medium text-neutral-200">
                API
              </span>
    <span class="inline-flex items-center gap-2 rounded-full border border-white/20 bg-white/5 backdrop-blur-sm px-3 py-1.5 text-xs font-medium text-neutral-200">
                CLI
              </span>
  </div>

  <!-- Editor -->
  <div class="relative rounded-2xl border border-white/15 bg-white/5 backdrop-blur-md">
    <!-- Editor header -->
    <div class="flex items-center justify-between px-4 py-3">
      <div class="flex items-center gap-1.5">
        <span class="h-2.5 w-2.5 rounded-full bg-red-500/80"></span>
        <span class="h-2.5 w-2.5 rounded-full bg-amber-400/80"></span>
        <span class="h-2.5 w-2.5 rounded-full bg-emerald-500/80"></span>
      </div>
      <div class="text-xs text-neutral-300">app.js</div>
    </div>
    <div class="border-t border-white/10"></div>
    <pre class="overflow-auto p-4 text-[13px] leading-6 text-neutral-100/95"
      style="font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono','Courier New', monospace;"><span class="text-neutral-300/90">// Cool Tool quick start</span>
import CoolTool from 'cooltool'

const ct = new CoolTool({
  apiKey: process.env.COOLTOOL_API_KEY,
})

await ct.projects.create({ name: 'ACME' })

const task = await ct.tasks.create({
  title: 'Ship v1',
  assignees: ['elena'],
})

ct.automation.rule('on:task.done', (ctx) =&gt; {
  ctx.notify('#ship-it', `${ctx.task.title} is done`)
})</pre>
  </div>

  <!-- Actions -->
  <div class="mt-5 flex flex-col gap-3 sm:flex-row sm:items-center">
    <button class="inline-flex items-center gap-2 rounded-full bg-emerald-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm ring-1 ring-emerald-700/30 transition transform hover:-translate-y-0.5 active:translate-y-0 hover:bg-emerald-500 hover:ring-emerald-700/40 shadow-[0_8px_20px_-8px_rgba(16,185,129,0.6)] active:shadow-[0_4px_10px_-6px_rgba(16,185,129,0.6)]">
                <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="wand-2" class="lucide lucide-wand-2 h-4 w-4"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72" class=""></path><path d="m14 7 3 3" class=""></path><path d="M5 6v4" class=""></path><path d="M19 14v4" class=""></path><path d="M10 2v2" class=""></path><path d="M7 8H3" class=""></path><path d="M21 16h-4" class=""></path><path d="M11 3H9" class=""></path></svg>
                Try it now
              </button>
    <button class="inline-flex items-center justify-between gap-2 rounded-full bg-white px-5 py-2.5 text-sm font-medium text-slate-900 shadow-sm ring-1 ring-slate-200 transition transform hover:-translate-y-0.5 active:translate-y-0 hover:bg-slate-50 hover:ring-slate-300 shadow-[0_8px_20px_-10px_rgba(2,6,23,0.5)] active:shadow-[0_4px_10px_-8px_rgba(2,6,23,0.5)]">
                Explore Docs
                <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-right" class="lucide lucide-arrow-right h-4 w-4"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
              </button>
  </div>

  <!-- Subtle shadow footer -->
  <div
    class="pointer-events-none absolute inset-x-6 -bottom-6 h-12 rounded-b-[1.25rem] bg-black/0 shadow-[0_40px_60px_-30px_rgba(0,0,0,0.7)]">
  </div>
</div>