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">
    <title>67 Eagles | Event Sourced Tracking</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: #0a0a0a; --panel: #161616; }
        body { background: var(--bg); color: #fff; font-family: 'Inter', system-ui, sans-serif; margin: 0; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
        
        header { padding: 20px; background: #000; border-bottom: 1px solid #222; display: flex; justify-content: space-between; align-items: center; }
        .live-tag { color: var(--accent); font-weight: 900; font-size: 0.8rem; letter-spacing: 2px; display: flex; align-items: center; gap: 8px; }
        .live-tag::before { content: ''; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; display: inline-block; box-shadow: 0 0 10px var(--accent); }

        /* The State Projection (HUD) */
        #hud { height: 200px; background: radial-gradient(circle at center, #111, #000); display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 2px solid var(--accent); }
        #last-p { font-size: 4rem; font-weight: 900; color: var(--accent); text-transform: uppercase; line-height: 1; }
        #last-a { font-size: 1.5rem; color: #555; text-transform: uppercase; letter-spacing: 4px; margin-top: 10px; }

        /* Event Log */
        #stream { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column-reverse; gap: 10px; font-family: 'Roboto Mono', monospace; }
        .event { background: var(--panel); padding: 12px; border-radius: 6px; border-left: 3px solid #333; font-size: 0.9rem; animation: slide 0.2s ease-out; }
 ...