JSFiddle - React, Tailwind, and code Playground

by morphcast

HTML

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>MorphCast FACE_DETECTOR – Dark Frame Detection (multi-algoritmo)</title>
  <style>
    html, body { height: 100%; margin: 0; background: #0b0b0d; color: #e9e9ee; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
    .wrap { height: 100%; display: grid; place-items: center; }
    .stage { position: relative; width: min(92vw, 780px); aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: #14141a; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
    canvas#preview { width: 100%; height: 100%; display: block; image-rendering: auto; background: #101015; }

    /* Overlay top-right (lista algoritmi) */
    .panel {
      position: absolute; top: 12px; right: 12px;
      width: min(360px, 46vw);
      background: rgba(10,10,14,.72);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 12px;
      padding: 10px 10px 8px;
      backdrop-filter: blur(8px);
    }
    .panel h3 { margin: 0 0 8px; font-size: 12px; font-weight: 650; letter-spacing: .2px; color: rgba(255,255,255,.88); }
    ul#statusList { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
    .row { display:flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; }
    .row code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; color: rgba(255,255,255,.85); }
    .tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); white-space: nowrap; }
    .OK { background: rgba(46, 204, 113,.15); }
    .DARK { background: rgba(231, 76, 60,.18); }
    .SUSPECT { background: rgba(241, 196, 15,.18); }
    .NO_FACE { background: rgba(149, 165, 166,.16); }

    /* Banner centrale */
    .banner {
      position: absolute; left: 50%; bottom: 14px; transform:...