CRM Mini-Panel

<div
        class="w-full max-w-md mx-auto enterprise-glass rounded-[2rem] p-8 shadow-2xl relative overflow-hidden group font-sans">
        <div
            class="absolute -top-12 -right-12 w-40 h-40 bg-indigo-500/10 blur-[60px] rounded-full group-hover:bg-indigo-500/20 transition-all">
        </div>
        <div class="flex items-center gap-4 mb-8">
            <div class="w-16 h-16 rounded-2xl bg-zinc-800 flex items-center justify-center overflow-hidden">
                <div class="w-full h-full bg-gradient-to-tr from-indigo-500 to-purple-500 opacity-20"></div>
            </div>
            <div>
                <h4 class="text-xl font-bold text-white tracking-tight leading-none">Acme Corp Ltd.</h4>
                <p class="text-sm text-zinc-500 mt-1">Enterprise Subscription</p>
            </div>
        </div>
        <div class="grid grid-cols-2 gap-4 mb-8">
            <div class="p-4 bg-zinc-950/50 rounded-2xl border border-zinc-800">
                <div class="text-[10px] font-bold text-zinc-500 uppercase mb-1 tracking-widest">Total ARR</div>
                <div class="text-lg font-black text-white">$42,000</div>
            </div>
            <div class="p-4 bg-zinc-950/50 rounded-2xl border border-zinc-800">
                <div class="text-[10px] font-bold text-zinc-500 uppercase mb-1 tracking-widest">Team Size</div>
                <div class="text-lg font-black text-white">84 seats</div>
            </div>
        </div>
        <div class="space-y-4">
            <div class="flex items-center justify-between text-xs font-medium">
                <span class="text-zinc-500">Renewal Date</span>
                <span class="text-white">Oct 12, 2024</span>
            </div>
            <div class="flex items-center justify-between text-xs font-medium">
                <span class="text-zinc-500">Health Score</span>
                <span class="text-emerald-400 font-bold">Excellent (94)</span>
            </div>
        </div>
        <button
            class="w-full mt-8 py-3 bg-zinc-100 hover:bg-white text-zinc-950 font-bold rounded-xl transition-all">View
            CRM Entry</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>