Pricing Quota Slider

<div class="w-full max-w-2xl mx-auto p-10 bg-zinc-900 border border-zinc-800 rounded-[2.5rem] font-sans">
        <div class="text-center mb-10">
            <h2 class="text-3xl font-bold text-white mb-2 italic tracking-tighter uppercase">Payload Pricing</h2>
            <p class="text-zinc-500">Scale your compute as your userbase grows.</p>
        </div>
        <div class="mb-12">
            <div class="flex justify-between items-end mb-4">
                <span class="text-xs font-black text-zinc-400 uppercase tracking-widest">Compute Units</span>
                <span class="text-4xl font-black text-white tracking-tighter">500k</span>
            </div>
            <input type="range"
                class="w-full h-2 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-indigo-500" min="100"
                max="1000" step="10">
        </div>
        <div class="grid grid-cols-3 gap-6">
            <div class="p-6 bg-zinc-950/50 rounded-2xl border border-zinc-800 text-center">
                <div class="text-[10px] font-bold text-zinc-500 uppercase mb-1">Latency</div>
                <div class="text-xl font-bold text-emerald-400 tracking-tight">&lt;40ms</div>
            </div>
            <div class="p-6 bg-zinc-950/50 rounded-2xl border border-zinc-800 text-center">
                <div class="text-[10px] font-bold text-zinc-500 uppercase mb-1">Uptime</div>
                <div class="text-xl font-bold text-indigo-400 tracking-tight">99.99%</div>
            </div>
            <div class="p-6 bg-zinc-950/50 rounded-2xl border border-zinc-800 text-center">
                <div class="text-[10px] font-bold text-zinc-500 uppercase mb-1">Monthly Cost</div>
                <div class="text-xl font-bold text-white tracking-tight">$420</div>
            </div>
        </div>
        <button
            class="w-full mt-10 py-4 bg-indigo-600 hover:bg-indigo-500 text-white font-bold rounded-2xl transition-all shadow-xl shadow-indigo-600/10">Proceed
            with Enterprise Tier</button>
    </div>

    <script>
        document.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const originalText = btn.innerText;
                if (originalText === 'PROCESSING...' || originalText === 'SUCCESS') return;
                btn.innerText = 'PROCESSING...';
                btn.classList.add('opacity-50');
                setTimeout(() => {
                    btn.innerText = 'SUCCESS';
                    btn.classList.remove('opacity-50');
                    setTimeout(() => btn.innerText = originalText, 1500);
                }, 800);
            });
        });
    </script>