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: Full Suite</title>
    <script src="https://unpkg.com/@reduxjs/[email protected]/dist/redux-toolkit.umd.js"></script>
    <style>
        :root {
            --primary-blue: #004aad; --success-green: #2ecc71; --bg-light: #f4f7f6;
            --text-dark: #2c3e50; --border-color: #cfd8dc; 
            --locked-overlay: rgba(30, 39, 46, 0.4); 
            --wood-light: #f3d2a2; --wood-dark: #e6b980; --grain: rgba(139, 69, 19, 0.1);
            --offense-orange: rgba(255, 155, 48, 0.15);
            --defense-blue: rgba(0, 74, 173, 0.15);
            --stats-purple: #9b59b6; --log-teal: #1abc9c;
            --bench-base: #eceff1; --bench-alt: #cfd8dc;
            --name-bg: #455a64; --danger-red: #c0392b;
        }

        body, html { height: 100%; margin: 0; padding: 0; font-family: system-ui, -apple-system, sans-serif; background: var(--bg-light); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
        .view { display: none; height: 100vh; flex-direction: column; width: 100vw; }
        .active-view { display: flex !important; }

        /* HEADER */
        .tactical-header { display: flex; justify-content: space-between; align-items: center; background: var(--text-dark); color: white; padding: 0 5px; height: 55px; min-height: 55px; z-index: 100; position: relative; }
        
        /* 4-WAY TOGGLE - Optimized for space */
        .mode-toggle { display: flex; background: #263238; border-radius: 12px; padding: 2px; border: 1px solid #546e7a; gap: 1px; flex: 1; margin: 0 10px; }
        .mode-btn { border: none; background: transparent; color: #78909c; padding: 6px 0; border-radius: 10px; font-weight: 900; font-size: 0.6rem; cursor: pointer; text-transform: uppercase; flex: 1; transition: 0.2s; }
...