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 PRODUCTION</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 { --green: #00ff00; --dim: #003300; --bg: #000000; }
        
        body { 
            background: var(--bg); color: var(--green); 
            font-family: 'Courier New', monospace; 
            margin: 0; display: flex; flex-direction: column; 
            height: 100vh; overflow: hidden; position: relative;
            text-transform: uppercase;
        }

        /* --- THE REAL GREG YOUNG ASCII --- */
        #greg-visage {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            font-size: 6px; line-height: 6px; font-weight: 900; color: #112211;
            white-space: pre; pointer-events: none; z-index: 0;
            opacity: 1; text-align: center;
        }

        /* --- UI LAYERS --- */
        header { 
            padding: 15px; background: rgba(0,0,0,0.9); border-bottom: 2px solid var(--green); 
            display: flex; justify-content: space-between; align-items: center; z-index: 10; 
        }
        
        #scoreboard { 
            display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); 
            gap: 10px; padding: 15px; z-index: 10; 
        }
        .p-card { 
            background: rgba(0, 10, 0, 0.9); padding: 10px; border: 1px solid var(--dim); 
            box-shadow: 0 0 10px rgba(0,255,0,0.1); 
        }
        .p-card.active { border-color: var(--green); background: rgba(0, 40, 0, 0.9); }
        
        .p-stat-row { display: flex; justify-content: space-between;...