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 | THE EVENT STORE</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(22, 22, 22, 0.9); }
        
        body { 
            background: var(--bg); color: #eee; 
            font-family: 'JetBrains Mono', monospace; 
            margin: 0; display: flex; flex-direction: column; 
            height: 100vh; overflow: hidden; position: relative;
        }

        /* THE GREG YOUNG BACKGROUND (ASCII PORTRAIT) */
        #greg-bg {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            font-size: 6px; line-height: 5px; color: #151515;
            white-space: pre; pointer-events: none; z-index: -1;
            display: flex; justify-content: center; align-items: center;
            opacity: 0.6; font-family: 'Courier New', monospace;
        }

        header { padding: 15px 20px; background: rgba(0,0,0,0.85); border-bottom: 2px solid #222; display: flex; justify-content: space-between; align-items: center; z-index: 10; }
        .live-tag { color: var(--accent); font-weight: 900; font-size: 0.7rem; letter-spacing: 2px; }

        #scoreboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; padding: 15px; background: transparent; z-index: 10; }
        .p-card { background: var(--panel); padding: 12px; border-radius: 6px; border: 1px solid #333; transition: 0.2s; backdrop-filter: blur(4px); }
        .p-card.pulse { border-color: var(--accent); transform: scale(1.03); background: rgba(46, 204, 113, 0.1); }
        .p-name { color: var(--accent);...