JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="ka">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>საგვარეულო ხე</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
  :root{
    --paper: #ded9c6;
    --paper-light: #f0ebdb;
    --ink: #22271f;
    --ink-soft: #4b5142;
    --wine: #7a2e2e;
    --wine-dark: #5e2222;
    --gold: #a9832f;
    --gold-soft: #c7a45a;
    --sage: #6b7d63;
    --line: #b7ae94;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0; padding:0; width:100%; height:100%;
    background:var(--paper);
    color:var(--ink);
    font-family:'Source Serif 4', serif;
    overflow:hidden;
  }
  #paper-grain{
    position:fixed; inset:0; pointer-events:none; opacity:0.5; mix-blend-mode:multiply; z-index:1;
  }
  header{
    position:fixed; top:0; left:0; right:0; z-index:20;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 22px;
    background:linear-gradient(180deg, rgba(222,217,198,0.97), rgba(222,217,198,0.88));
    border-bottom:1px solid var(--line);
    backdrop-filter: blur(2px);
  }
  h1{
    font-family:'Fraunces', serif;
    font-weight:600;
    font-size:22px;
    letter-spacing:0.02em;
    margin:0;
    color:var(--ink);
  }
  h1 span{ color:var(--wine); font-style:italic; font-weight:400; }
  .toolbar{ display:flex; gap:8px; flex-wrap:wrap; }
  button{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.03em;
    text-transform:uppercase;
    background:var(--paper-light);
    color:var(--ink);
    border:1px solid var(--line);
    padding:9px 14px;
    border-radius:2px;
    cursor:pointer;
    transition: background 0.15s,...