JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Dragon's Gaze V3.0 - Obsidian & Ember</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700&display=swap');

        /* --- New Color Palette --- */
        :root {
            --obsidian: #0A0A0A;
            --ember-red: #660000;
            --ember-orange: #CC3300;
            --metallic-grey: #404040;
            --radius: 200px; /* Increased radius */
        }
        
        /* --- Global & Background --- */
        body {
            margin: 0; padding: 0;
            background-color: var(--obsidian);
            color: var(--ember-orange);
            font-family: 'Cinzel', serif;
            display: flex; justify-content: center; align-items: center;
            height: 100vh; overflow: hidden;
            background-image:
                radial-gradient(ellipse at center, rgba(102, 0, 0, 0.5) 0%, transparent 60%);
        }

        /* --- DYNAMIC BACKGROUND GLOW (Subtle, deep red heat) --- */
        .background-glow {
            filter: blur(100px);
            background: radial-gradient(circle, var(--ember-orange) 0%, var(--ember-red) 50%, transparent 70%);
            opacity: 0;
            transition: opacity 1.5s ease;
            width: 1200px; height: 1200px;
        }
        .background-glow.active { opacity: 0.3; }

        #particle-canvas { z-index: 1; pointer-events: none; }
        .menu-system { position: relative; z-index: 2; }

        /* --- Dragon's Eye Button (Obsidian Focus) --- */
        #central-btn {
            width: 160px; height: 160px; border-radius: 50%;
            background: var(--obsidian);
            border: 5px solid var(--metallic-grey);
            color: var(--ember-orange);
            box-shadow: 0 0 10px var(--ember-red), inset 0 0 50px rgba(0,0,0,1);
   ...