Code Snippet Feature Card with Gradient Background

<article
  class="overflow-hidden border-white/10 border rounded-[28px] relative shadow-[0_0_0_1px_rgba(255,255,255,0.02)_inset,0_10px_30px_-10px_rgba(0,0,0,0.6)] mx-auto max-w-xl m-12">
  <script src="https://cdn.jsdelivr.net/npm/lucide@0.452.0/dist/umd/lucide.min.js"></script>

  <div
    class="absolute inset-0 opacity-[0.22] [mask-image:radial-gradient(120%_80%_at_50%_0%,black,transparent)] bg-[linear-gradient(to_right,rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.04)_1px,transparent_1px)] [background-size:40px_40px] pointer-events-none">
  </div>

  <!-- Visual -->
  <div class="md:h-72 h-64 pt-6 pr-6 pb-6 pl-6 relative">
    <div class="opacity-60 absolute top-0 right-0 bottom-0 left-0 blur-3xl translate-y-2"></div>
    <div class="relative mx-auto h-full w-full flex items-center justify-center">
      <div class="scale-[0.75]">
        <div
          class="backdrop-blur-[2px] bg-gradient-to-b from-white/[0.06] to-white/[0.02] border-white/15 border rounded-2xl shadow-[0_10px_30px_-10px_rgba(0,0,0,0.7)]">
          <div class="px-4 py-3 border-b border-white/10 flex items-center gap-2">
            <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="code-2" class="lucide lucide-code-2 w-4 h-4 text-white/70">
              <path d="m18 16 4-4-4-4" class=""></path>
              <path d="m6 8-4 4 4 4" class=""></path>
              <path d="m14.5 4-5 16" class=""></path>
            </svg>
            <span class="text-[11px] font-medium text-white/80">config.tsx</span>
            <span class="ml-auto text-[10px] text-white/50">modified</span>
          </div>
          <pre class="text-[11px] leading-relaxed text-white/80 pt-4 pr-4 pb-4 pl-4">export const appConfig = {
  framework: "next",
  runtime: "edge",
  regions: ["sfo1", "iad1"],
  env: {
    DATABASE_URL: process.env.DB,
    REDIS_TOKEN: process.env.CACHE
  }
}

deploy(appConfig)</pre>
        </div>
      </div>
    </div>
  </div>

  <!-- Copy -->
  <div class="relative p-6 pt-2">
    <h3 class="text-lg font-semibold tracking-tight text-white/95">Deploy instantly</h3>
    <p class="mt-2 text-sm text-white/70">
      Push to production in seconds with zero configuration across global edge networks.
    </p>
  </div>

  <!-- Card-scoped icon init -->
  <script>
    (function () {
              var root = document.currentScript && document.currentScript.closest('article');
              if (root && window.lucide && typeof window.lucide.createIcons === 'function') {
                window.lucide.createIcons({ strokeWidth: 1.5 }, root);
              }
            })();
  </script>
</article>