Cyberpunk Pricing Cards with Draggable Interaction

<div
  class="antialiased bg-[#09090b] text-white min-h-screen flex flex-col items-center justify-center overflow-x-hidden relative font-sans font-light selection:bg-cyan-500/30 py-20 md:py-0"
  style="font-family: 'Inter', sans-serif;">
  <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&display=swap" rel="stylesheet">

  <!-- Ambient Visual Environment -->
  <div class="fixed inset-0 z-0 flex items-center justify-center pointer-events-none overflow-hidden">
    <div class="absolute w-[70vw] h-[70vw] max-w-[900px] max-h-[900px] rounded-full blur-[120px] opacity-20"
      style="background: radial-gradient(circle, rgba(34,211,238,0.3) 0%, transparent 70%); left: 5%; top: 10%; animation: pulse 6s ease-in-out infinite;">
    </div>
    <div class="absolute w-[70vw] h-[70vw] max-w-[900px] max-h-[900px] rounded-full blur-[120px] opacity-20"
      style="background: radial-gradient(circle, rgba(251,146,60,0.3) 0%, transparent 70%); right: 5%; bottom: 10%; animation: pulse 8s ease-in-out infinite;">
    </div>
  </div>

  <!-- Processing Signal Noise -->
  <canvas id="noiseCanvas"
    class="fixed inset-0 pointer-events-none z-50 opacity-[0.08] w-full h-full mix-blend-screen"></canvas>
  <script>
    (function() {
            const c = document.getElementById('noiseCanvas');
            const gl = c.getContext('webgl', { alpha: true });
            const pid = gl.createProgram();
            const shader = (type, src) => {
                const s = gl.createShader(type);
                gl.shaderSource(s, src);
                gl.compileShader(s);
                gl.attachShader(pid, s);
            };
            shader(gl.VERTEX_SHADER, 'attribute vec2 p;void main(){gl_Position=vec4(p,0,1);}');
            shader(gl.FRAGMENT_SHADER, 'precision lowp float;uniform float t;float rand(vec2 n){return fract(sin(dot(n,vec2(12.9898,4.1414)))*43758.5453);}void main(){vec2 uv=gl_FragCoord.xy;float n=rand(uv+vec2(t,-t));gl_FragColor=vec4(vec3(n),1.0);}');
            gl.linkProgram(pid); gl.useProgram(pid);
            gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, 1,1]), gl.STATIC_DRAW);
            const p = gl.getAttribLocation(pid, 'p');
            gl.enableVertexAttribArray(p);
            gl.vertexAttribPointer(p, 2, gl.FLOAT, false, 0, 0);
            const tLoc = gl.getUniformLocation(pid, 't');
            const resize = () => { c.width = window.innerWidth; c.height = window.innerHeight; gl.viewport(0,0,c.width,c.height); };
            window.addEventListener('resize', resize); resize();
            let time = 0;
            const draw = () => { time += 0.05; gl.uniform1f(tLoc, time); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); requestAnimationFrame(draw); };
            draw();
        })();
  </script>

  <!-- Header Interface -->
  <div class="relative z-10 text-center mb-10 md:mb-16 px-6 flex flex-col items-center w-full max-w-3xl mx-auto">
    <div
      class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-white/5 border border-white/10 mb-6 shadow-lg backdrop-blur-sm">
      <div class="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse"></div>
      <span class="text-xs text-gray-300 tracking-widest uppercase">Connection Protocols</span>
    </div>
    <h1 class="text-4xl md:text-5xl tracking-tight text-gray-100 mb-4" style="text-shadow: 0 2px 10px rgba(0,0,0,0.8);">
      Select Uplink Tier</h1>
    <p class="text-sm text-gray-400/90 max-w-md typewriter h-10 md:h-auto"
      data-text="Establish your network parameters and allocate bandwidth resources."></p>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
                document.querySelectorAll('.typewriter').forEach(el => {
                    const text = el.getAttribute('data-text');
                    let i = 0;
                    const type = () => {
                        if (i < text.length) { el.innerHTML += text.charAt(i); i++; setTimeout(type, 40); }
                        else { el.innerHTML += '<span class="animate-pulse">_</span>'; }
                    };
                    setTimeout(type, 1000);
                });
            });
    </script>
  </div>

  <!-- Access Modules Grid -->
  <div
    class="relative w-full max-w-5xl mx-auto px-6 flex flex-col md:flex-row items-center justify-center gap-10 md:gap-8 z-10"
    style="perspective: 1200px;">

    <!-- Standard Uplink -->
    <div class="draggable-wrapper cursor-grab select-none relative w-full max-w-sm md:w-[22rem] h-[32rem] z-10">
      <div
        class="relative w-full h-full rounded-3xl p-8 flex flex-col group transition-all duration-700 ease-out hover:-translate-y-4 md:-rotate-6 md:translate-x-12 hover:rotate-0 hover:brightness-125"
        style="background: linear-gradient(145deg, #1f1f22 0%, #0d0d0f 100%); box-shadow: 25px 25px 50px rgba(0,0,0,0.9), inset 1px 1px 2px rgba(255,255,255,0.1), inset 0 -30px 60px rgba(6, 182, 212, 0.05);">

        <div class="flex justify-between items-start relative z-10 mb-8">
          <div class="w-16 h-16 rounded-xl p-2.5 flex items-end justify-between gap-0.5"
            style="background: #070708; box-shadow: inset 3px 3px 8px rgba(0,0,0,0.9);">
            <div class="w-full bg-cyan-400/90 rounded-t-sm animate-pulse" style="height: 40%;"></div>
            <div class="w-full bg-cyan-400/90 rounded-t-sm animate-pulse" style="height: 85%; animation-delay: 0.2s;">
            </div>
            <div class="w-full bg-cyan-400/90 rounded-t-sm animate-pulse" style="height: 55%; animation-delay: 0.5s;">
            </div>
          </div>
          <div class="flex flex-col items-end">
            <div class="flex items-center gap-1.5 text-cyan-400 tracking-tight"
              style="text-shadow: 0 0 8px rgba(34,211,238,0.4);">
              <iconify-icon icon="solar:box-linear" class="text-lg"></iconify-icon>
              <span>BASE</span>
            </div>
            <div class="text-xs text-cyan-600/80 mt-1.5 uppercase tracking-widest">Standard</div>
          </div>
        </div>

        <div class="relative z-10 mb-6">
          <div class="flex items-end gap-2 mb-2">
            <span class="text-5xl tracking-tight text-cyan-400" style="text-shadow: 0 0 15px rgba(34,211,238,0.3);">0.00</span>
            <span class="text-sm text-cyan-600/80 mb-1 uppercase tracking-widest">/ Cycle</span>
          </div>
          <h2 class="text-xl tracking-tight text-gray-100 mb-2">Core Node Access</h2>
          <p class="text-xs text-gray-400/90 leading-relaxed">Baseline telemetry and standard encryption protocols.</p>
        </div>

        <div class="relative z-10 flex flex-col gap-3 mb-8 flex-grow border-t border-white/5 pt-4">
          <div class="flex items-center gap-3 text-xs text-gray-300">
            <iconify-icon icon="solar:shield-check-linear" class="text-cyan-500 text-base"></iconify-icon>
            <span>128-bit Packet Encryption</span>
          </div>
          <div class="flex items-center gap-3 text-xs text-gray-300">
            <iconify-icon icon="solar:database-linear" class="text-cyan-500 text-base"></iconify-icon>
            <span>10TB Data Throughput</span>
          </div>
        </div>

        <button class="w-full py-3.5 px-5 rounded-xl flex items-center justify-between group/btn transition-all duration-300 hover:bg-[#0a0a0c] cursor-pointer"
                        style="background: #070708; box-shadow: inset 3px 3px 8px rgba(0,0,0,0.9);">
                    <span class="text-xs text-cyan-400 tracking-widest uppercase group-hover/btn:text-cyan-300">Initialize</span>
                    <iconify-icon icon="solar:alt-arrow-right-linear" class="text-cyan-500 text-lg group-hover/btn:translate-x-1 transition-transform"></iconify-icon>
                </button>
      </div>
    </div>

    <!-- Premium Uplink -->
    <div class="draggable-wrapper cursor-grab select-none relative w-full max-w-sm md:w-[22rem] h-[32rem] z-0">
      <div
        class="relative w-full h-full rounded-3xl p-8 flex flex-col group transition-all duration-700 ease-out hover:-translate-y-4 md:rotate-6 md:-translate-x-12 hover:rotate-0 hover:brightness-125"
        style="background: linear-gradient(145deg, #221e1d 0%, #100a09 100%); box-shadow: 25px 25px 50px rgba(0,0,0,0.9), inset 1px 1px 2px rgba(255,255,255,0.1), inset 0 -30px 60px rgba(249, 115, 22, 0.05);">

        <div class="flex justify-between items-start relative z-10 mb-8">
          <div class="w-16 h-16 rounded-xl p-2.5 flex items-end justify-between gap-0.5"
            style="background: #080504; box-shadow: inset 3px 3px 8px rgba(0,0,0,0.9);">
            <div class="w-full bg-orange-400/90 rounded-t-sm animate-pulse" style="height: 60%;"></div>
            <div class="w-full bg-orange-400/90 rounded-t-sm animate-pulse" style="height: 30%; animation-delay: 0.4s;">
            </div>
            <div class="w-full bg-orange-400/90 rounded-t-sm animate-pulse" style="height: 90%; animation-delay: 0.1s;">
            </div>
          </div>
          <div class="flex flex-col items-end">
            <div class="flex items-center gap-1.5 text-orange-400 tracking-tight"
              style="text-shadow: 0 0 8px rgba(251,146,60,0.4);">
              <iconify-icon icon="solar:layers-linear" class="text-lg"></iconify-icon>
              <span>PRIME</span>
            </div>
            <div class="text-xs text-orange-600/80 mt-1.5 uppercase tracking-widest">Elevated</div>
          </div>
        </div>

        <div class="relative z-10 mb-6">
          <div class="flex items-end gap-2 mb-2">
            <span class="text-5xl tracking-tight text-orange-400" style="text-shadow: 0 0 15px rgba(251,146,60,0.3);">28.50</span>
            <span class="text-sm text-orange-600/80 mb-1 uppercase tracking-widest">/ Cycle</span>
          </div>
          <h2 class="text-xl tracking-tight text-gray-100 mb-2">Nexus Relay</h2>
          <p class="text-xs text-gray-400/90 leading-relaxed">Advanced routing with zero-latency failover systems.</p>
        </div>

        <div class="relative z-10 flex flex-col gap-3 mb-8 flex-grow border-t border-white/5 pt-4">
          <div class="flex items-center gap-3 text-xs text-gray-300">
            <iconify-icon icon="solar:shield-keyhole-linear" class="text-orange-500 text-base"></iconify-icon>
            <span>256-bit Quantum Encryption</span>
          </div>
          <div class="flex items-center gap-3 text-xs text-gray-300">
            <iconify-icon icon="solar:infinity-linear" class="text-orange-500 text-base"></iconify-icon>
            <span>Uncapped Data Velocity</span>
          </div>
        </div>

        <button class="w-full py-3.5 px-5 rounded-xl flex items-center justify-between group/btn transition-all duration-300 hover:bg-[#0d0705] cursor-pointer"
                        style="background: #080504; box-shadow: inset 3px 3px 8px rgba(0,0,0,0.9);">
                    <span class="text-xs text-orange-400 tracking-widest uppercase group-hover/btn:text-orange-300">Initialize</span>
                    <iconify-icon icon="solar:alt-arrow-right-linear" class="text-orange-500 text-lg group-hover/btn:translate-x-1 transition-transform"></iconify-icon>
                </button>
      </div>
    </div>
  </div>

  <!-- Interface Manipulation Script -->
  <script>
    document.querySelectorAll('.draggable-wrapper').forEach(wrapper => {
            let isDragging = false;
            let startX, startY, currentX = 0, currentY = 0;
            const originalZ = wrapper.style.zIndex;

            const onStart = (e) => {
                if (e.target.closest('button')) return;
                isDragging = true;
                wrapper.style.transition = 'none'; wrapper.style.zIndex = '50';
                wrapper.classList.replace('cursor-grab', 'cursor-grabbing');
                const ev = e.touches ? e.touches[0] : e;
                startX = ev.clientX - currentX; startY = ev.clientY - currentY;
            };

            const onMove = (e) => {
                if (!isDragging) return;
                const ev = e.touches ? e.touches[0] : e;
                currentX = ev.clientX - startX; currentY = ev.clientY - startY;
                wrapper.style.transform = `translate(${currentX}px, ${currentY}px)`;
            };

            const onEnd = () => {
                if (!isDragging) return;
                isDragging = false;
                wrapper.classList.replace('cursor-grabbing', 'cursor-grab');
                wrapper.style.zIndex = originalZ; wrapper.style.transition = 'transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)';
                currentX = 0; currentY = 0; wrapper.style.transform = `translate(0px, 0px)`;
            };

            wrapper.addEventListener('mousedown', onStart);
            window.addEventListener('mousemove', onMove);
            window.addEventListener('mouseup', onEnd);
            wrapper.addEventListener('touchstart', onStart, {passive: true});
            window.addEventListener('touchmove', (e) => { if(isDragging) e.preventDefault(); onMove(e); }, {passive: false});
            window.addEventListener('touchend', onEnd);
        });
  </script>
  <style>
    @keyframes pulse {

      0%,
      100% {
        opacity: 0.15;
        transform: scale(1);
      }

      50% {
        opacity: 0.25;
        transform: scale(1.1);
      }
    }
  </style>
</div>