Neon 3D Pricing Cards with Tilt Interaction

<div class="antialiased selection:bg-white/20 selection:text-white"
  style="background-color: #030305; background-image: radial-gradient(circle at 20% 0%, rgba(0, 243, 255, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 100%, rgba(188, 19, 254, 0.03) 0%, transparent 50%); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 40px 0; font-family: 'Inter', sans-serif;">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

    .perspective-container {
      perspective: 1400px;
      transform-style: preserve-3d;
    }

    .rise-wrapper {
      animation: riseUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      opacity: 0;
      transform: translateY(80px) scale(0.95);
      transform-style: preserve-3d;
    }

    @keyframes riseUp {
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .card-3d {
      width: 340px;
      height: 540px;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.1s ease;
      cursor: default;
    }

    .theme-cyan {
      --neon: #00f3ff;
      --neon-glow: rgba(0, 243, 255, 0.3);
      --neon-bg: rgba(0, 243, 255, 0.1);
      --neon-dim: rgba(0, 243, 255, 0.05);
    }

    .theme-purple {
      --neon: #bc13fe;
      --neon-glow: rgba(188, 19, 254, 0.3);
      --neon-bg: rgba(188, 19, 254, 0.1);
      --neon-dim: rgba(188, 19, 254, 0.05);
    }

    .theme-pink {
      --neon: #ff00ea;
      --neon-glow: rgba(255, 0, 234, 0.3);
      --neon-bg: rgba(255, 0, 234, 0.1);
      --neon-dim: rgba(255, 0, 234, 0.05);
    }

    .layer {
      position: absolute;
      inset: 0;
      border-radius: 24px;
      pointer-events: none;
      transform-style: preserve-3d;
      transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .layer-shadow {
      transform: translateZ(0);
      background: rgba(0, 0, 0, 0.9);
      box-shadow: 0 40px 80px rgba(0, 0, 0, 0.8), 0 0 40px var(--neon-dim);
      filter: blur(12px);
      opacity: 0.5;
    }

    .layer-base {
      transform: translateZ(0);
      background: linear-gradient(165deg, rgba(20, 20, 25, 0.95) 0%, rgba(10, 10, 12, 1) 100%);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.05);
      overflow: hidden;
    }

    .layer-frame {
      transform: translateZ(0);
      border: 1px solid transparent;
      clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
    }

    .content-layer {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      padding: 40px 32px 32px;
      transform-style: preserve-3d;
      pointer-events: none;
      z-index: 10;
    }

    .content-layer>* {
      transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
      transform: translateZ(0);
    }

    .card-3d:hover .layer-shadow {
      transform: translateZ(-40px) scale(0.92);
      opacity: 1;
      box-shadow: 0 50px 100px rgba(0, 0, 0, 0.9), 0 0 60px var(--neon-bg);
    }

    .card-3d:hover .layer-frame {
      transform: translateZ(25px);
      border: 1px solid var(--neon-glow);
      box-shadow: inset 0 0 20px var(--neon-bg), 0 0 15px var(--neon-bg);
    }

    .card-3d:hover .depth-1 {
      transform: translateZ(50px);
    }

    .card-3d:hover .depth-2 {
      transform: translateZ(75px);
    }

    .card-3d:hover .depth-3 {
      transform: translateZ(110px);
      pointer-events: auto;
    }

    .bg-grid {
      position: absolute;
      inset: 0;
      background-size: 30px 30px;
      background-image: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
      mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    }

    .glare {
      position: absolute;
      inset: 0;
      border-radius: 24px;
      mix-blend-mode: overlay;
      opacity: 0;
      transition: opacity 0.5s;
    }

    .card-3d:hover .glare {
      opacity: 1;
    }

    .divider-neon {
      height: 1px;
      background: linear-gradient(to right, transparent, var(--neon-glow), transparent);
      margin-top: 2rem;
      width: 100%;
    }

    .btn-glow {
      position: relative;
      background: rgba(10, 10, 12, 0.8);
      border: 1px solid var(--neon-glow);
      color: var(--neon);
      font-family: 'Space Grotesk', sans-serif;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 14px 32px;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 0 15px var(--neon-dim);
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .btn-glow:hover {
      color: #000;
      box-shadow: 0 0 25px var(--neon-glow);
      transform: scale(1.05) translateY(-2px);
      border-color: var(--neon);
      background: var(--neon);
    }

    .corner-accent {
      position: absolute;
      width: 12px;
      height: 12px;
      border-color: var(--neon);
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .card-3d:hover .corner-accent {
      opacity: 0.8;
    }
  </style>
  <script src="https://cdn.tailwindcss.com"></script>

  <div class="perspective-container w-full max-w-[1200px] mx-auto px-6">
    <div class="flex flex-col xl:flex-row gap-8 justify-center items-center">
      <!-- PLAN 1: STARTER -->
      <div class="rise-wrapper" style="animation-delay: 0.1s">
        <div class="card-3d theme-cyan">
          <div class="layer layer-shadow"></div>
          <div class="layer layer-base">
            <div class="bg-grid"></div>
            <div class="glare"></div>
          </div>
          <div class="layer layer-frame">
            <div class="corner-accent top-4 left-4 border-t-2 border-l-2"></div>
            <div class="corner-accent top-4 right-4 border-t-2 border-r-2"></div>
            <div class="corner-accent bottom-4 left-4 border-b-2 border-l-2"></div>
            <div class="corner-accent bottom-4 right-4 border-b-2 border-r-2"></div>
          </div>
          <div class="content-layer">
            <div class="depth-1 flex flex-col items-center text-center">
              <div
                class="px-3 py-1 rounded-full bg-[var(--neon-bg)] border border-[var(--neon-glow)] text-[var(--neon)] text-[10px] font-bold tracking-[0.2em] mb-4 uppercase">
                Basic Node</div>
              <h2 class="font-display text-3xl font-bold text-white">NOVA BASIC</h2>
              <div class="mt-4 flex items-baseline gap-1">
                <span class="text-2xl text-gray-500">$</span><span class="text-5xl font-bold text-white">19</span><span class="text-gray-500 text-sm">/mo</span>
              </div>
              <div class="divider-neon"></div>
            </div>
            <div class="depth-2 mt-8 space-y-4 text-sm text-gray-300">
              <div class="flex items-center gap-3"><svg class="w-5 h-5 text-[var(--neon)]" fill="none"
                  stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 6L9 17l-5-5"></path>
                </svg>Standard Compute</div>
              <div class="flex items-center gap-3"><svg class="w-5 h-5 text-[var(--neon)]" fill="none"
                  stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 6L9 17l-5-5"></path>
                </svg>Basic Data Uplink</div>
              <div class="flex items-center gap-3 opacity-40"><svg class="w-5 h-5 text-gray-500" fill="none"
                  stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>Quantum Encrypt</div>
            </div>
            <div class="depth-3 mt-auto"><button class="btn-glow">Deploy</button></div>
          </div>
        </div>
      </div>
      <!-- PLAN 2: PRO -->
      <div class="rise-wrapper" style="animation-delay: 0.25s">
        <div class="card-3d theme-purple">
          <div class="layer layer-shadow"></div>
          <div class="layer layer-base">
            <div class="bg-grid"></div>
            <div class="glare"></div>
          </div>
          <div class="layer layer-frame">
            <div class="corner-accent top-4 left-4 border-t-2 border-l-2"></div>
            <div class="corner-accent top-4 right-4 border-t-2 border-r-2"></div>
            <div class="corner-accent bottom-4 left-4 border-b-2 border-l-2"></div>
            <div class="corner-accent bottom-4 right-4 border-b-2 border-r-2"></div>
          </div>
          <div class="content-layer">
            <div class="depth-1 flex flex-col items-center text-center">
              <div
                class="px-3 py-1 rounded-full bg-[var(--neon-bg)] border border-[var(--neon-glow)] text-[var(--neon)] text-[10px] font-bold tracking-[0.2em] mb-4 uppercase">
                Advanced Node</div>
              <h2 class="font-display text-4xl font-bold text-white">ORBITAL PRO</h2>
              <div class="mt-4 flex items-baseline gap-1">
                <span class="text-3xl text-gray-500">$</span><span class="text-6xl font-bold text-white">49</span><span class="text-gray-500 text-sm">/mo</span>
              </div>
              <div class="divider-neon"></div>
            </div>
            <div class="depth-2 mt-8 space-y-4 text-sm text-gray-300">
              <div class="flex items-center gap-3 text-white"><svg class="w-5 h-5 text-[var(--neon)]" fill="none"
                  stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 6L9 17l-5-5"></path>
                </svg>Quantum Cloud</div>
              <div class="flex items-center gap-3"><svg class="w-5 h-5 text-[var(--neon)]" fill="none"
                  stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 6L9 17l-5-5"></path>
                </svg>Neural Nodes</div>
              <div class="flex items-center gap-3"><svg class="w-5 h-5 text-[var(--neon)]" fill="none"
                  stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 6L9 17l-5-5"></path>
                </svg>Zero-Latency</div>
            </div>
            <div class="depth-3 mt-auto"><button class="btn-glow">Initiate</button></div>
          </div>
        </div>
      </div>
      <!-- PLAN 3: ENTERPRISE -->
      <div class="rise-wrapper" style="animation-delay: 0.4s">
        <div class="card-3d theme-pink">
          <div class="layer layer-shadow"></div>
          <div class="layer layer-base">
            <div class="bg-grid"></div>
            <div class="glare"></div>
          </div>
          <div class="layer layer-frame">
            <div class="corner-accent top-4 left-4 border-t-2 border-l-2"></div>
            <div class="corner-accent top-4 right-4 border-t-2 border-r-2"></div>
            <div class="corner-accent bottom-4 left-4 border-b-2 border-l-2"></div>
            <div class="corner-accent bottom-4 right-4 border-b-2 border-r-2"></div>
          </div>
          <div class="content-layer">
            <div class="depth-1 flex flex-col items-center text-center">
              <div
                class="px-3 py-1 rounded-full bg-[var(--neon-bg)] border border-[var(--neon-glow)] text-[var(--neon)] text-[10px] font-bold tracking-[0.2em] mb-4 uppercase">
                Enterprise Node</div>
              <h2 class="font-display text-3xl font-bold text-white">GALACTIC MAX</h2>
              <div class="mt-4 flex items-baseline gap-1">
                <span class="text-2xl text-gray-500">$</span><span class="text-5xl font-bold text-white">99</span><span class="text-gray-500 text-sm">/mo</span>
              </div>
              <div class="divider-neon"></div>
            </div>
            <div class="depth-2 mt-8 space-y-4 text-sm text-gray-300">
              <div class="flex items-center gap-3 text-white"><svg class="w-5 h-5 text-[var(--neon)]" fill="none"
                  stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 6L9 17l-5-5"></path>
                </svg>Private Cluster</div>
              <div class="flex items-center gap-3"><svg class="w-5 h-5 text-[var(--neon)]" fill="none"
                  stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 6L9 17l-5-5"></path>
                </svg>Custom AI Training</div>
              <div class="flex items-center gap-3"><svg class="w-5 h-5 text-[var(--neon)]" fill="none"
                  stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M20 6L9 17l-5-5"></path>
                </svg>24/7 Support</div>
            </div>
            <div class="depth-3 mt-auto"><button class="btn-glow">Access</button></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const cards = document.querySelectorAll('.card-3d');
      const smoothing = 0.1;
      const states = Array.from(cards).map(el => ({
        el, glare: el.querySelector('.glare'), tX: 0, tY: 0, cX: 0, cY: 0
      }));

      states.forEach(s => {
        s.el.addEventListener('mousemove', (e) => {
          const r = s.el.getBoundingClientRect();
          const x = e.clientX - r.left, y = e.clientY - r.top;
          s.tX = ((x - r.width / 2) / (r.width / 2)) * 14;
          s.tY = -((y - r.height / 2) / (r.height / 2)) * 14;
          if (s.glare) s.glare.style.background = `radial-gradient(circle at ${(x / r.width) * 100}% ${(y / r.height) * 100}%, rgba(255, 255, 255, 0.15) 0%, transparent 60%)`;
        });
        s.el.addEventListener('mouseleave', () => { s.tX = 0; s.tY = 0; });
      });

      function loop() {
        states.forEach(s => {
          s.cX += (s.tX - s.cX) * smoothing;
          s.cY += (s.tY - s.cY) * smoothing;
          s.el.style.transform = `rotateX(${s.cY}deg) rotateY(${s.cX}deg)`;
        });
        requestAnimationFrame(loop);
      }
      loop();
    });
  </script>
</div>