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 | EVENT STORE V4</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: #2ecc71; --bg: #050505; --panel: rgba(18, 18, 18, 0.95); }
        body { background: var(--bg); color: #eee; font-family: 'JetBrains Mono', monospace; margin: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

        /* REFINED GREG YOUNG BACKGROUND */
        #greg-bg {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            font-size: 8px; line-height: 7px; color: #1a1a1a;
            white-space: pre; pointer-events: none; z-index: -1;
            display: flex; justify-content: center; align-items: center;
            font-family: monospace; opacity: 0.8;
        }

        header { padding: 15px; background: rgba(0,0,0,0.9); border-bottom: 2px solid #222; display: flex; justify-content: space-between; align-items: center; z-index: 10; }
        #scoreboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 15px; z-index: 10; }
        .p-card { background: var(--panel); padding: 12px; border-radius: 6px; border: 1px solid #333; backdrop-filter: blur(5px); }
        .p-card.active { border-color: var(--accent); box-shadow: 0 0 15px rgba(46, 204, 113, 0.2); }
        .p-name { color: var(--accent); font-weight: 900; }
        
        #hud { height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); border-bottom: 4px solid var(--accent); z-index: 10; }
        #last-p { font-size: 3.5rem; font-weight: 900; color:...