Code Snippet Card with Status Bar

<div
  class="group relative overflow-hidden sm:p-8 hover:bg-white/10 transition-all duration-500 bg-white/5 border-white/10 border rounded-2xl pt-6 pr-6 pb-6 pl-6 max-w-3xl">
  <!-- Enhanced code window -->
  <div
    class="relative overflow-hidden bg-neutral-950/90 w-full border-white/20 border rounded-xl shadow-[0_40px_120px_rgba(0,0,0,0.7)] backdrop-blur-sm">
    <!-- Enhanced header -->
    <div class="flex items-center justify-between px-4 py-3 border-b border-white/15 bg-white/5">
      <div class="flex items-center gap-2">
        <span class="h-3 w-3 rounded-full bg-red-500/90 shadow-sm"></span>
        <span class="h-3 w-3 rounded-full bg-yellow-500/90 shadow-sm"></span>
        <span class="h-3 w-3 rounded-full bg-green-500/90 shadow-sm"></span>
      </div>
      <div class="flex items-center gap-2">
        <span class="text-xs text-white/50 font-geist-mono">index.html</span>
        <div class="h-2 w-2 rounded-full bg-emerald-400/60"></div>
      </div>
    </div>

    <!-- Enhanced code content -->
    <pre class="text-[13px] leading-relaxed text-white/80 font-geist-mono pt-4 pr-4 pb-4 pl-4"
      style="white-space: pre-wrap;"><span class="text-emerald-400">&lt;!doctype html&gt;</span>
<span class="text-blue-400">&lt;html&gt;</span>
  <span class="text-blue-400">&lt;head&gt;</span>
    <span class="text-purple-400">&lt;meta</span> <span class="text-emerald-400">charset</span>=<span class="text-amber-300">"utf-8"</span><span class="text-purple-400">&gt;</span>
    <span class="text-purple-400">&lt;title&gt;</span><span class="text-white">Your Project</span><span class="text-purple-400">&lt;/title&gt;</span>
    <span class="text-purple-400">&lt;link</span> <span class="text-emerald-400">rel</span>=<span class="text-amber-300">"stylesheet"</span> <span class="text-emerald-400">href</span>=<span class="text-amber-300">"style.css"</span><span class="text-purple-400">&gt;</span>
  <span class="text-blue-400">&lt;/head&gt;</span>
  <span class="text-blue-400">&lt;body&gt;</span>
    <span class="text-emerald-400">&lt;script</span> <span class="text-emerald-400">src</span>=<span class="text-amber-300">"app.js"</span><span class="text-emerald-400">&gt;&lt;/script&gt;</span>
  <span class="text-blue-400">&lt;/body&gt;</span>
<span class="text-blue-400">&lt;/html&gt;</span></pre>

    <!-- Status bar -->
    <div class="flex items-center justify-between px-4 py-2 border-t border-white/10 bg-white/5">
      <div class="flex items-center gap-2">
        <div class="h-2 w-2 rounded-full bg-emerald-400"></div>
        <span class="text-xs text-emerald-400 font-geist-mono">Ready</span>
      </div>
      <span class="text-xs text-white/40 font-geist-mono">UTF-8</span>
    </div>
  </div>

  <div class="mt-6">
    <div
      class="inline-flex items-center gap-2 mb-4 px-3 py-1 rounded-full bg-purple-400/10 border border-purple-400/20">
      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-purple-400">
        <path d="m16 18 6-6-6-6" class=""></path>
        <path d="m8 6-6 6 6 6" class=""></path>
      </svg>
      <span class="text-xs font-medium text-purple-400 font-geist-mono">Code</span>
    </div>
    <h3
      class="text-2xl md:text-3xl font-semibold tracking-tight text-white mb-3 group-hover:text-purple-300 transition-colors">
      Web Development</h3>
    <p class="text-white/70 leading-relaxed font-geist-mono">Beautiful, performant websites tailored to your brand. We
      build seamless user experiences that engage visitors and turn them into loyal customers.</p>
  </div>
</div>