JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hero Analytics Pro - Final Edition</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  <style>
    :root {
      /* THEME */
      --bg-body: #050507;
      --bg-panel: #0d1117;
      --bg-card: #161b22;
      --bg-card-hover: #1f242c;
      --bg-input: #010409;
      
      --primary: #2f81f7;
      --primary-glow: rgba(47, 129, 247, 0.15);
      --accent: #238636;
      --warning: #d29922;
      --danger: #f85149;
      --text-main: #c9d1d9;
      --text-muted: #8b949e;
      --text-bright: #ffffff;
      --border: #30363d;
      --border-active: #58a6ff;
      
      --radius-sm: 4px;
      --radius-md: 8px;
      
      --header-height: 60px;
      --sidebar-width: 280px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
    
    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg-body);
      color: var(--text-main);
      height: 100vh;
      overflow: hidden;
      font-size: 13px;
    }

    /* SCROLLBARS */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

    /* UI ELEMENTS */
    button {
      cursor: pointer;
      border: 1px solid var(--border);
      background: var(--bg-card);
      color: var(--text-main);
      border-radius: var(--radius-sm);
      padding: 5px 12px;
      font-weight: 600;
      font-size: 11px;
      text-transform: uppercase;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap:...