Experiment Banner

<div class="w-full max-w-3xl mx-auto gradient-border shadow-[0_20px_50px_rgba(99,102,241,0.2)]">
        <div class="p-6 flex flex-col md:flex-row items-center gap-6">
            <div
                class="w-14 h-14 rounded-2xl bg-indigo-500 flex items-center justify-center text-white shrink-0 animate-bounce">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path
                        d="M11 4a2 2 0 114 0v1a1 1 0 001 1h3a1 1 0 011 1v3a1 1 0 01-1 1h-1a2 2 0 100 4h1a1 1 0 011 1v3a1 1 0 01-1 1h-3a1 1 0 01-1-1v-1a2 2 0 10-4 0v1a1 1 0 01-1 1H7a1 1 0 01-1-1v-3a1 1 0 00-1-1H4a2 2 0 110-4h1a1 1 0 001-1V7a1 1 0 011-1h3a1 1 0 001-1V4z"
                        stroke-width="2"></path>
                </svg>
            </div>
            <div class="flex-1 text-center md:text-left">
                <h3 class="text-lg font-bold text-white mb-1">Scale your production limits today</h3>
                <p class="text-zinc-400 text-sm">Your account is currently hitting 85% of its monthly token quota.
                    Increase your limits to prevent service interruption.</p>
            </div>
            <button
                class="px-6 py-3 bg-white text-zinc-950 font-bold rounded-xl hover:bg-zinc-200 transition-all shadow-xl shadow-white/10 whitespace-nowrap">Upgrade
                Plan</button>
        </div>
    </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>