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>Team Tracker Pro</title>
    <style>
        :root {
            --primary-blue: #004aad; --success-green: #2ecc71; --bg-light: #f4f7f6;
            --text-dark: #2c3e50; --border-color: #b0bec5; --locked-overlay: rgba(0, 0, 0, 0.25);
            --dash-line: #546e7a; --wood-light: #f3d2a2; --wood-dark: #e6b980;
            --grain: rgba(139, 69, 19, 0.1); --error-red: #ff5252;
            --player-blue: #e3f2fd;
        }

        body, html { height: 100%; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; background: var(--bg-light); overflow: hidden; }
        .view { display: none; height: 100vh; flex-direction: column; padding: clamp(5px, 2vw, 15px); box-sizing: border-box; }
        .active-view { display: flex; }

        /* THE HUD: Fixed to viewport to prevent clipping */
        #commandConsole {
            position: fixed;
            top: 15%; left: 50%;
            transform: translate(-50%, -50%);
            width: 85%; max-width: 350px;
            background: rgba(44, 62, 80, 0.98);
            backdrop-filter: blur(10px);
            border: 3px solid var(--primary-blue);
            border-radius: clamp(10px, 4vw, 20px);
            box-shadow: 0 20px 60px rgba(0,0,0,0.6);
            z-index: 99999;
            display: none;
            flex-direction: row;
            padding: 10px; gap: 10px;
        }
        .console-active { display: flex !important; }

        .big-btn { flex: 1; height: 55px; border-radius: 10px; border: none; color: white; cursor: pointer; font-weight: 900; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
        .btn-copy { background: #546e7a; } /* Grayish per your screenshot */
        .btn-confirm {...