Skeuomorphic Pricing Grid for Node Provisioning

<div
  class="antialiased selection:bg-cyan-500/30 selection:text-cyan-200 min-h-screen flex items-center justify-center p-4 md:p-8 relative"
  style="background-color: #0f0f11; font-family: 'Inter', sans-serif; color: #cbd5e1;">
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
    rel="stylesheet">
  <script>
    tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'] },
                    boxShadow: {
                        'skeuo-raised': 'inset 0 1px 0 0 rgba(255,255,255,0.1), 0 1px 2px 0 rgba(0,0,0,0.5), 0 4px 12px 0 rgba(0,0,0,0.5)',
                        'skeuo-sunken': 'inset 0 2px 4px 0 rgba(0,0,0,0.6), 0 1px 0 0 rgba(255,255,255,0.05)',
                        'skeuo-btn': 'inset 0 1px 0 0 rgba(255,255,255,0.15), 0 2px 4px 0 rgba(0,0,0,0.3)',
                        'skeuo-btn-active': 'inset 0 2px 4px 0 rgba(0,0,0,0.4)',
                        'led-glow': '0 0 10px 1px rgba(6,182,212,0.5)',
                    }
                }
            }
        }
  </script>

  <!-- Background Elements -->
  <div class="fixed inset-0 z-0 opacity-40 pointer-events-none"
    style="background-image: radial-gradient(circle at 50% 0%, #1e293b 0%, #0f0f11 60%);"></div>
  <div class="fixed inset-0 z-0 opacity-[0.03] pointer-events-none"
    style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');">
  </div>

  <!-- Main Chassis -->
  <main
    class="relative z-10 w-full max-w-5xl bg-[#18181b] rounded-xl shadow-2xl border border-[#27272a] overflow-hidden flex flex-col">

    <!-- Header -->
    <header
      class="h-16 bg-gradient-to-b from-[#27272a] to-[#18181b] border-b border-[#000] shadow-[0_1px_0_rgba(255,255,255,0.05)] flex items-center justify-between px-6 md:px-8 relative z-20">
      <div class="flex items-center gap-4">
        <div class="relative w-3 h-3 rounded-full bg-cyan-500 shadow-led-glow"></div>
        <div class="flex flex-col">
          <span class="font-mono text-[10px] uppercase tracking-widest text-slate-500 font-medium">System Status</span>
          <span class="text-xs font-medium text-slate-200 tracking-wide">OPERATIONAL</span>
        </div>
      </div>
      <div class="hidden md:flex gap-1 opacity-20">
        <div class="w-1 h-4 bg-slate-500 rounded-full"></div>
        <div class="w-1 h-4 bg-slate-500 rounded-full"></div>
        <div class="w-1 h-4 bg-slate-500 rounded-full"></div>
      </div>
      <div class="flex items-center gap-3 font-mono text-xs text-slate-500">
        <iconify-icon icon="solar:shield-keyhole-linear" class="text-slate-400"></iconify-icon>
        <span>SESSION: <span class="text-slate-300">88-A4</span></span>
      </div>
    </header>

    <!-- Content Area -->
    <div class="flex-grow bg-[#131315] relative p-6 md:p-10">
      <div class="absolute inset-0 pointer-events-none shadow-[inset_0_4px_12px_rgba(0,0,0,0.5)]"></div>
      <div class="relative z-10 max-w-4xl mx-auto">
        <div class="mb-10 flex flex-col md:flex-row md:items-end justify-between gap-6 border-b border-[#27272a] pb-8">
          <div>
            <div class="flex items-center gap-2 mb-3">
              <span class="px-2 py-0.5 rounded bg-[#27272a] border border-[#3f3f46] text-[10px] font-mono text-cyan-400 shadow-sm uppercase tracking-wider">Config 01</span>
            </div>
            <h1 class="text-3xl md:text-4xl font-medium text-slate-100 tracking-tight drop-shadow-md mb-2">Node
              Provisioning</h1>
            <p class="text-sm text-slate-500 max-w-lg leading-relaxed">Select a computational matrix for your
              deployment. Resources are allocated in real-time upon initialization.</p>
          </div>
          <div class="flex items-center bg-[#09090b] p-1 rounded-lg border border-[#27272a] shadow-skeuo-sunken">
            <button class="px-4 py-1.5 rounded text-xs font-medium text-slate-200 bg-[#27272a] shadow-skeuo-btn border border-[#3f3f46] transition-all">Monthly</button>
            <button class="px-4 py-1.5 rounded text-xs font-medium text-slate-500 hover:text-slate-300 transition-colors">Yearly</button>
          </div>
        </div>

        <!-- Grid -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
          <!-- Starter Card -->
          <div
            class="group relative bg-[#18181b] rounded-xl border border-[#27272a] shadow-skeuo-raised p-1 flex flex-col transition-transform duration-300 hover:-translate-y-0.5">
            <div
              class="h-full bg-gradient-to-b from-[#202023] to-[#18181b] rounded-lg p-6 md:p-8 flex flex-col border border-white/5 relative overflow-hidden">
              <div
                class="absolute top-3 left-3 w-2 h-2 rounded-full bg-[#0f0f11] shadow-[inset_0_1px_2px_rgba(255,255,255,0.1)] flex items-center justify-center opacity-50">
                <div class="w-1.5 h-0.5 bg-[#27272a] rotate-45"></div>
              </div>
              <div
                class="absolute top-3 right-3 w-2 h-2 rounded-full bg-[#0f0f11] shadow-[inset_0_1px_2px_rgba(255,255,255,0.1)] flex items-center justify-center opacity-50">
                <div class="w-1.5 h-0.5 bg-[#27272a] rotate-45"></div>
              </div>
              <div class="flex justify-between items-start mb-6">
                <div
                  class="w-10 h-10 rounded bg-[#131315] border border-[#27272a] shadow-skeuo-sunken flex items-center justify-center text-slate-400 group-hover:text-cyan-400 transition-colors duration-500">
                  <iconify-icon icon="solar:server-path-linear" width="20"></iconify-icon>
                </div>
                <div class="font-mono text-xs text-slate-600 uppercase tracking-widest">Type-A</div>
              </div>
              <div class="mb-8">
                <h3 class="text-base font-medium text-slate-200 tracking-tight mb-1">Kinetic Core</h3>
                <div class="flex items-baseline gap-1 mb-3">
                  <span class="text-2xl font-normal text-white tracking-tight">Free</span>
                  <span class="text-xs text-slate-500">/ forever</span>
                </div>
                <p class="text-xs text-slate-500 leading-relaxed">Essential throughput for static sites and prototype
                  environments.</p>
              </div>
              <div class="bg-[#111113] rounded border border-[#27272a] p-4 shadow-skeuo-sunken mb-8 space-y-3">
                <div class="flex justify-between items-center text-xs">
                  <span class="text-slate-500">Throughput</span><span class="font-mono text-cyan-500/80">100 MB/s</span>
                </div>
                <div class="w-full h-px bg-[#27272a]"></div>
                <div class="flex justify-between items-center text-xs">
                  <span class="text-slate-500">Protocol</span><span class="font-mono text-slate-300">IPv4 Only</span>
                </div>
                <div class="w-full h-px bg-[#27272a]"></div>
                <div class="flex justify-between items-center text-xs">
                  <span class="text-slate-500">Uptime</span><span class="font-mono text-slate-300">Standard</span></div>
              </div>
              <button class="w-full py-3 rounded bg-[#27272a] hover:bg-[#323238] border border-[#3f3f46] shadow-skeuo-btn active:shadow-skeuo-btn-active active:translate-y-[1px] transition-all flex items-center justify-center gap-2 group/btn">
                                <span class="text-xs font-medium text-slate-300 uppercase tracking-wider">Mount Volume</span>
                                <iconify-icon icon="solar:arrow-right-linear" class="text-slate-400 group-hover/btn:translate-x-0.5 transition-transform"></iconify-icon>
                            </button>
            </div>
          </div>

          <!-- Pro Card -->
          <div
            class="group relative bg-[#18181b] rounded-xl border border-[#27272a] shadow-skeuo-raised p-1 flex flex-col transition-transform duration-300 hover:-translate-y-0.5 ring-1 ring-cyan-900/30">
            <div
              class="absolute -top-1 left-1/2 -translate-x-1/2 w-16 h-[2px] bg-cyan-500 shadow-[0_0_10px_rgba(6,182,212,0.8)] z-20">
            </div>
            <div
              class="h-full bg-gradient-to-b from-[#202023] to-[#18181b] rounded-lg p-6 md:p-8 flex flex-col border border-white/5 relative overflow-hidden">
              <div
                class="absolute top-3 left-3 w-2 h-2 rounded-full bg-[#0f0f11] shadow-[inset_0_1px_2px_rgba(255,255,255,0.1)] flex items-center justify-center opacity-50">
                <div class="w-1.5 h-0.5 bg-[#27272a] rotate-45"></div>
              </div>
              <div
                class="absolute top-3 right-3 w-2 h-2 rounded-full bg-[#0f0f11] shadow-[inset_0_1px_2px_rgba(255,255,255,0.1)] flex items-center justify-center opacity-50">
                <div class="w-1.5 h-0.5 bg-[#27272a] rotate-45"></div>
              </div>
              <div class="flex justify-between items-start mb-6">
                <div
                  class="w-10 h-10 rounded bg-[#131315] border border-cyan-900/30 shadow-skeuo-sunken flex items-center justify-center text-cyan-400">
                  <iconify-icon icon="solar:database-linear" width="20"></iconify-icon>
                </div>
                <div class="font-mono text-xs text-cyan-500/70 uppercase tracking-widest">Type-S</div>
              </div>
              <div class="mb-8">
                <h3 class="text-base font-medium text-white tracking-tight mb-1 drop-shadow-md">Fusion Cluster</h3>
                <div class="flex items-baseline gap-1 mb-3">
                  <span class="text-2xl font-normal text-white tracking-tight">$49</span><span class="text-xs text-slate-500">/ mo</span>
                </div>
                <p class="text-xs text-slate-400 leading-relaxed">Dedicated computational power for high-frequency
                  production workloads.</p>
              </div>
              <div
                class="bg-[#111113] rounded border border-[#27272a] p-4 shadow-skeuo-sunken mb-8 space-y-3 relative overflow-hidden">
                <div
                  class="absolute inset-0 opacity-5 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:10px_10px]">
                </div>
                <div class="flex justify-between items-center text-xs relative z-10">
                  <span class="text-slate-500">Throughput</span><span class="font-mono text-cyan-400">Unlimited</span>
                </div>
                <div class="w-full h-px bg-[#27272a] relative z-10"></div>
                <div class="flex justify-between items-center text-xs relative z-10">
                  <span class="text-slate-500">Protocol</span><span class="font-mono text-slate-300">IPv6 Ready</span>
                </div>
                <div class="w-full h-px bg-[#27272a] relative z-10"></div>
                <div class="flex justify-between items-center text-xs relative z-10">
                  <span class="text-slate-500">Uptime</span><span class="font-mono text-slate-300">99.99% SLA</span>
                </div>
              </div>
              <button class="w-full py-3 rounded bg-gradient-to-b from-cyan-600 to-cyan-700 hover:from-cyan-500 hover:to-cyan-600 border-t border-cyan-400/20 shadow-[0_2px_10px_-2px_rgba(6,182,212,0.4),inset_0_1px_0_rgba(255,255,255,0.2)] active:translate-y-[1px] transition-all flex items-center justify-center gap-2 group/btn">
                                <span class="text-xs font-medium text-white uppercase tracking-wider text-shadow-sm">Initialize Node</span>
                                <iconify-icon icon="solar:bolt-linear" class="text-cyan-100 group-hover/btn:text-white"></iconify-icon>
                            </button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Footer -->
    <footer
      class="bg-[#111113] border-t border-[#000] p-4 flex flex-col md:flex-row items-center justify-between gap-4 text-[10px] font-mono uppercase tracking-wider text-slate-600 relative z-20 shadow-[0_-1px_0_rgba(255,255,255,0.05)]">
      <div class="flex gap-6">
        <div class="flex items-center gap-2"><iconify-icon
            icon="solar:satellite-linear"></iconify-icon><span>Region: US-East-1</span></div>
        <div class="flex items-center gap-2"><iconify-icon
            icon="solar:shield-check-linear"></iconify-icon><span>Encryption: AES-256</span></div>
      </div>
      <div class="flex gap-4">
        <a href="#" class="hover:text-cyan-500 transition-colors">Docs</a><span class="text-slate-700">|</span>
        <a href="#" class="hover:text-cyan-500 transition-colors">API</a><span class="text-slate-700">|</span>
        <a href="#" class="hover:text-cyan-500 transition-colors">Support</a>
      </div>
    </footer>
  </main>
</div>