JSFiddle - React, Tailwind, and code Playground

by JoshGough

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>67 EAGLES | GREG YOUNG MODE</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/annyang/2.6.1/annyang.min.js"></script>
    <script src="https://unpkg.com/@reduxjs/[email protected]/dist/redux-toolkit.umd.js"></script>
    <style>
        :root { --accent: #0f0; --bg: #000; --panel: rgba(0, 20, 0, 0.85); --text: #cfc; }
        
        body { 
            background: var(--bg); color: var(--text); 
            font-family: 'Courier New', monospace; 
            margin: 0; display: flex; flex-direction: column; 
            height: 100vh; overflow: hidden; position: relative;
        }

        /* --- THE MONOLITH (GREG YOUNG) --- */
        #greg-monolith {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            font-size: 1.2vh; line-height: 1vh; font-weight: 900; color: #1a331a;
            white-space: pre; pointer-events: none; z-index: 0;
            text-align: center; width: 100vw; overflow: hidden;
            text-shadow: 0 0 5px rgba(0, 255, 0, 0.1);
        }

        /* --- UI LAYERS (Float over Greg) --- */
        header { 
            padding: 15px; background: rgba(0,0,0,0.9); border-bottom: 2px solid var(--accent); 
            display: flex; justify-content: space-between; align-items: center; z-index: 10; 
        }
        
        #scoreboard { 
            display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); 
            gap: 8px; padding: 10px; z-index: 10; 
        }
        .p-card { 
            background: var(--panel); padding: 10px; border: 1px solid #333; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.5); backdrop-filter: blur(2px);
        }
        .p-card.active { border-color: var(--accent); background: rgba(0, 50, 0, 0.9); }
...