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.0">
<title>TwinCAT 2 — The Interactive Field Manual</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<style>
/* ============ BASE ============ */
:root{
  --bg:#0b1017; --panel:#121a25; --panel2:#0d141d; --inset:#0a0f16;
  --line:#243244; --line2:#33455c;
  --ink:#e8eef6; --mut:#8ba0b8; --dim:#5c7189;
  --amber:#ffb444; --cyan:#37d0ee; --green:#3ddc84; --red:#ff5d5d; --blue:#6ea8ff;
  --disp:'Oswald','Arial Narrow',sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font:15px/1.65 var(--body);
  overflow-x:hidden;
}
body::before{ /* ambient glows */
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(55,208,238,.07), transparent 60%),
    radial-gradient(820px 620px at -8% 108%, rgba(255,180,68,.06), transparent 60%);
}
body::after{ /* engineering grid */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.55;
  background:
    linear-gradient(rgba(148,180,215,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,180,215,.045) 1px, transparent 1px);
  background-size:34px 34px;
}
::selection{background:rgba(255,180,68,.35)}
h1,h2,h3{font-family:var(--disp);text-transform:uppercase}
a{color:var(--cyan)}
button{font-family:inherit;cursor:pointer}
section{scroll-margin-top:92px}

/* ============ SIDEBAR ============ */
#side{
 ...