JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ultimate AMS/ADS Visual Lab</title>
<style>
  :root {
    --bg: #061019;
    --bg2: #0b1826;
    --panel: rgba(14, 27, 40, 0.92);
    --line: #28455b;
    --text: #eef8ff;
    --muted: #9db2c4;
    --cyan: #59dcff;
    --green: #5be595;
    --red: #ff6b75;
    --yellow: #ffd45a;
    --purple: #b78cff;
    --orange: #ff9d5c;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    font: 15px/1.5 "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background:
      radial-gradient(circle at 20% 0%, rgba(89,220,255,0.12), transparent 28%),
      radial-gradient(circle at 80% 10%, rgba(183,140,255,0.10), transparent 22%),
      linear-gradient(180deg, #081522 0%, var(--bg) 100%);
    min-height: 100vh;
  }

  header {
    padding: 22px 18px 10px;
    text-align: center;
  }

  h1 {
    margin: 0;
    font-size: clamp(28px, 4vw, 52px);
    letter-spacing: -1px;
    background: linear-gradient(90deg, var(--cyan), var(--purple), var(--yellow));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .sub {
    max-width: 1100px;
    margin: 10px auto 0;
    color: var(--muted);
    padding: 0 12px;
  }

  .tabbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 18px auto 6px;
    max-width: 1300px;
    padding: 0 12px;
  }

  button {
    border: 1px solid #39586f;
    background: #102435;
    color: var(--text);
    border-radius: 12px;
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 800;
    transition: 0.18s;
  }

  button:hover { transform: translateY(-1px); background: #173349; }
  button.primary { border-color: var(--cyan); background: #0f3345; }
  button.danger { border-color: var(--red); }
  button.good { border-color:...