Neon Dashboard Modal

<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 backdrop-blur-sm dark:bg-black dark:bg-opacity-85">
    <div class="relative w-full max-w-4xl p-8 overflow-hidden rounded-lg shadow-xl bg-gradient-to-br from-orange-800 to-red-900 ring-4 ring-orange-400/50 dark:from-orange-900 dark:to-red-950 dark:ring-red-700/60 transition-all duration-300 transform scale-95 opacity-0 animate-scale-in glow-effect-container">
        <style>
            @keyframes scale-in {
                from { transform: scale(0.95); opacity: 0; }
                to { transform: scale(1); opacity: 1; }
            }
            .animate-scale-in {
                animation: scale-in 0.3s ease-out forwards;
            }
            .glow-effect-container::before {
                content: '';
                position: absolute;
                top: -10px;
                left: -10px;
                right: -10px;
                bottom: -10px;
                border-radius: 12px; /* Slightly larger than element's border-radius */
                background: conic-gradient(from var(--angle), #fb923c, #f97316, #ea580c, #c2410c, #b45309, #fb923c);
                background-size: 200% 200%;
                filter: blur(15px);
                z-index: -1;
                animation: rotate 4s linear infinite;
                opacity: 0.7;
            }
            .dark .glow-effect-container::before {
                background: conic-gradient(from var(--angle), #ef4444, #dc2626, #b91c1c, #991b1b, #7f1d1d, #ef4444);
            }
            @keyframes rotate {
                to { --angle: 360deg; }
            }
            @property --angle {
                syntax: '<angle>';
                inherits: false;
                initial-value: 0deg;
            }
        </style>
        <button class="absolute top-4 right-4 text-orange-200 hover:text-orange-100 dark:text-red-300 dark:hover:text-red-200 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-red-400 rounded-full p-2">
            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>

        <h2 class="mb-6 text-4xl font-extrabold text-orange-100 drop-shadow-lg text-center dark:text-red-100 sm:text-5xl">
            Dashboard Insights <span class="text-orange-300 dark:text-red-200">Overview</span>
        </h2>

        <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
            <!-- Card 1: Sales Performance -->
            <div class="p-6 rounded-lg bg-orange-700/60 backdrop-blur-sm shadow-lg ring-2 ring-orange-500/50 dark:bg-red-900/60 dark:ring-red-700/50 transition-all duration-300 hover:scale-[1.02] hover:ring-orange-400 dark:hover:ring-red-600">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-2xl font-bold text-orange-100 dark:text-red-200">Sales Performance</h3>
                    <svg class="w-10 h-10 text-orange-300 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8L13 17.5M4 16l3-3m0 0l3-3m-3 3l-3 3M17 14l-3-3m0 0l-3-3m3 3l-3 3"></path></svg>
                </div>
                <p class="text-5xl font-extrabold text-orange-200 dark:text-red-300 drop-shadow-md mb-2">$15.2K</p>
                <p class="text-orange-300 dark:text-red-400">+12% from last month</p>
                <div class="w-full h-2 mt-4 rounded-full bg-orange-600 dark:bg-red-800 overflow-hidden">
                    <div class="h-full rounded-full bg-orange-300 dark:bg-red-500 w-3/4"></div>
                </div>
            </div>

            <!-- Card 2: User Engagement -->
            <div class="p-6 rounded-lg bg-orange-700/60 backdrop-blur-sm shadow-lg ring-2 ring-orange-500/50 dark:bg-red-900/60 dark:ring-red-700/50 transition-all duration-300 hover:scale-[1.02] hover:ring-orange-400 dark:hover:ring-red-600">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-2xl font-bold text-orange-100 dark:text-red-200">User Engagement</h3>
                    <svg class="w-10 h-10 text-orange-300 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-5a3 3 0 00-3-3H6a3 3 0 00-3 3v5h5M7 13v-3a2 2 0 012-2h4a2 2 0 012 2v3m7 0l2 2m-2-2l-2-2m2 2L13 9.5"></path></svg>
                </div>
                <p class="text-5xl font-extrabold text-orange-200 dark:text-red-300 drop-shadow-md mb-2">2.8K</p>
                <p class="text-orange-300 dark:text-red-400">+5% new sign-ups</p>
                <div class="flex items-center mt-4">
                    <img class="w-8 h-8 rounded-full border-2 border-orange-400 dark:border-red-600 mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 1">
                    <img class="w-8 h-8 rounded-full border-2 border-orange-400 dark:border-red-600 -ml-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User 2">
                    <img class="w-8 h-8 rounded-full border-2 border-orange-400 dark:border-red-600 -ml-3" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User 3">
                    <span class="ml-2 text-orange-200 dark:text-red-300">+15 more</span>
                </div>
            </div>

            <!-- Card 3: Traffic Sources -->
            <div class="p-6 rounded-lg bg-orange-700/60 backdrop-blur-sm shadow-lg ring-2 ring-orange-500/50 dark:bg-red-900/60 dark:ring-red-700/50 transition-all duration-300 hover:scale-[1.02] hover:ring-orange-400 dark:hover:ring-red-600">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-2xl font-bold text-orange-100 dark:text-red-200">Traffic Sources</h3>
                    <svg class="w-10 h-10 text-orange-300 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z"></path></svg>
                </div>
                <ul class="text-orange-200 dark:text-red-300 space-y-2 text-lg">
                    <li class="flex justify-between">Direct <span class="font-semibold">40%</span></li>
                    <li class="flex justify-between">Search <span class="font-semibold">30%</span></li>
                    <li class="flex justify-between">Referral <span class="font-semibold">20%</span></li>
                    <li class="flex justify-between">Social <span class="font-semibold">10%</span></li>
                </ul>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex flex-col sm:flex-row justify-end mt-8 gap-4">
            <button class="px-8 py-3 rounded-full font-bold text-lg text-orange-100 bg-orange-600 hover:bg-orange-700 ring-2 ring-orange-400 hover:ring-orange-300 dark:bg-red-800 dark:hover:bg-red-900 dark:ring-red-700 dark:hover:ring-red-600 transition-all duration-300 shadow-lg neon-button">
                View Full Report
            </button>
            <button class="px-8 py-3 rounded-full font-bold text-lg text-orange-900 bg-orange-300 hover:bg-orange-200 ring-2 ring-orange-200 hover:ring-orange-100 dark:text-red-900 dark:bg-red-400 dark:hover:bg-red-300 dark:ring-red-300 dark:hover:ring-red-200 transition-all duration-300 shadow-lg neon-button">
                Customize Dashboard
            </button>
            <style>
                .neon-button {
                    box-shadow: 0 0 5px rgba(251, 146, 60, 0.7), 0 0 15px rgba(251, 146, 60, 0.5), 0 0 30px rgba(251, 146, 60, 0.3);
                }
                .dark .neon-button {
                    box-shadow: 0 0 5px rgba(239, 68, 68, 0.7), 0 0 15px rgba(239, 68, 68, 0.5), 0 0 30px rgba(239, 68, 68, 0.3);
                }
                .neon-button:hover {
                    transform: scale(1.03);
                    box-shadow: 0 0 8px rgba(251, 146, 60, 0.9), 0 0 20px rgba(251, 146, 60, 0.7), 0 0 40px rgba(251, 146, 60, 0.5);
                }
                .dark .neon-button:hover {
                    box-shadow: 0 0 8px rgba(239, 68, 68, 0.9), 0 0 20px rgba(239, 68, 68, 0.7), 0 0 40px rgba(239, 68, 68, 0.5);
                }
            </style>
        </div>
    </div>
</div>