JSFiddle - React, Tailwind, and code Playground

by dledle2

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Barcode → YouTube Mapper (single-file)</title>
<style>
  :root{
    --bg:#0f1724; --card:#0b1220; --muted:#9aa6bf; --accent:#06b6d4; --accent-2:#60a5fa;
    --glass: rgba(255,255,255,0.03);
  }
  body{
    margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
    background: linear-gradient(180deg,#071124 0%, #071128 100%); color:#e6eef8;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }
  header{padding:20px; display:flex; gap:12px; align-items:center; border-bottom:1px solid rgba(255,255,255,0.03)}
  header h1{margin:0; font-size:18px; letter-spacing:0.2px}
  .container{display:grid; grid-template-columns: 1fr 380px; gap:18px; padding:18px; max-width:1200px; margin:0 auto;}
  .card{background:var(--card); padding:14px; border-radius:12px; box-shadow:0 6px 18px rgba(2,6,23,0.6); border:1px solid rgba(255,255,255,0.02)}
  .video-wrap{display:flex; gap:12px; flex-direction:column; align-items:stretch}
  video{width:100%; border-radius:8px; background:#000; max-height:540px; object-fit:cover; box-shadow: 0 8px 30px rgba(0,0,0,0.6)}
  .controls{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
  button{background:linear-gradient(180deg,var(--accent),var(--accent-2)); color:#04293a; border:0; padding:10px 12px; border-radius:10px; font-weight:600; cursor:pointer}
  button.ghost{background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--muted); font-weight:600}
  .small{padding:8px 10px; font-size:13px}
  label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px}
  input[type="text"], input[type="url"], select, textarea{width:100%; padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:rgba(255,255,255,0.02); color:inherit}
  .side{display:flex;...