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>SixSeven Eagles Planner</title>
    <style>
        :root {
            --team-blue: #0046A6;
            --team-red: #E03C31;
            --bg-color: #F4F8FB;
            --text-color: #333333;
            --success: #27ae60;
            --gray: #95a5a6;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            margin: 0; padding: 0; padding-bottom: 90px;
        }

        .tab-nav {
            position: fixed; bottom: 0; left: 0; right: 0;
            background: white; display: flex; justify-content: space-around;
            padding: 10px 0; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 500;
        }
        .tab-btn {
            background: none; border: none; font-size: 0.8rem; color: #999;
            display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 600;
        }
        .tab-btn.active { color: var(--team-blue); }
        .tab-icon { font-size: 1.4rem; }

        .controls-header {
            background-color: white; padding: 12px 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky; top: 0; z-index: 100; border-bottom: 4px solid var(--team-red);
            display: flex; justify-content: space-between; align-items: center;
        }
        .brand { font-weight: 800; color: var(--team-blue); font-size: 1.1rem; text-transform: uppercase; }

        .view-section { display: none; padding: 15px; max-width: 800px; margin: 0 auto; }
        .view-section.active-view { display: block; }

        .roster-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
    ...