JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Agent USA: Final Simulation (Fixed)</title>
    <style>
        body { background-color: #050505; color: #0f0; font-family: 'Courier New', monospace; margin: 0; display: flex; height: 100vh; overflow: hidden; }
        
        #sidebar { width: 400px; border-right: 1px solid #333; background: #111; display: flex; flex-direction: column; padding: 10px; box-sizing: border-box; gap: 10px; }
        
        h1 { font-size: 14px; margin: 0; color: #fff; border-bottom: 1px solid #666; padding-bottom: 5px; }
        
        /* Stats Panels */
        .panel { background: #222; padding: 8px; border: 1px solid #444; }
        .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font-size: 11px; }
        .lbl { color: #888; }
        .val-c { color: #00ffff; font-weight: bold; }
        .val-i { color: #ff3333; font-weight: bold; }
        
        /* Selected City Info */
        #city-header { font-size: 14px; font-weight: bold; color: #fff; margin-bottom: 5px; display: block; border-bottom: 1px solid #444; padding-bottom: 2px;}
        #city-detail { font-size: 11px; color: #ccc; line-height: 1.4; }

        /* Logs */
        #log-wrapper { flex-grow: 1; border: 1px solid #333; background: #000; display: flex; flex-direction: column; min-height: 0; }
        #log-header { background: #222; color: #aaa; padding: 2px 5px; font-size: 10px; border-bottom: 1px solid #333; }
        #log { flex-grow: 1; overflow-y: auto; padding: 5px; font-size: 10px; font-family: monospace; scroll-behavior: smooth; }
        
        /* Log Colors */
        .entry { margin-bottom: 2px; border-bottom: 1px solid #111; }
        .tm { color: #555; display: inline-block; width: 70px; }
        .c-inf { color: #ff5555; } 
        .c-def { color: #5555ff; } 
        .c-flip { color: #fff; background: #900; padding: 0 3px; }
        .c-ply { color: #00ff00; }
       ...