JSFiddle - React, Tailwind, and code Playground

by Pakkapon Phongthawee

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>五重塔 — Gojūnotō · Ink Assembly</title>
<style>
  :root{ --paper:#f2eee4; --ink:#2a2520; --red:#b8352a; }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{height:100%;overflow:hidden;background:var(--paper)}
  body{
    font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Noto Serif CJK JP","Source Han Serif","MS PMincho",Georgia,serif;
    color:var(--ink); -webkit-user-select:none;user-select:none;
  }
  #paperbg{position:fixed;inset:0;z-index:0;
    background:radial-gradient(120% 90% at 50% 35%, rgba(255,255,255,0) 55%, rgba(120,100,60,.10) 100%), var(--paper);}
  #grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.55;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");}
  #c{position:fixed;inset:0;z-index:2;touch-action:none}
  canvas{display:block}
  #info{position:fixed;top:calc(12px + env(safe-area-inset-top));left:16px;z-index:5;pointer-events:none;max-width:min(70vw,430px)}
  #stepNo{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.12em;opacity:.65}
  #stepJP{font-size:clamp(21px,4.5vw,33px);font-weight:600;line-height:1.3;margin-top:2px;border-bottom:2px solid var(--red);display:inline-block;padding-bottom:2px}
  #stepEN{font-size:12px;letter-spacing:.14em;opacity:.75;margin-top:6px;text-transform:uppercase;font-family:ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif}
 ...