JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="zh-Hant">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Zune Player Emulator with Youtbue.</title>

    <style>
        :root {
            --ui-white: rgba(255,255,255,.92);
            --ui-dim: rgba(255,255,255,.65);
            --shadow: 0 18px 40px rgba(0,0,0,.55);
            --radius: 6px;
            --tintA: rgba(155, 60, 160, .35);
            --tintB: rgba(170, 190, 60, .28);
        }

        html, body {
            height: 100%;
            margin: 0;
            background: #0b0b0b;
            overflow: hidden;
            font-family: "Segoe UI", "Microsoft JhengHei", system-ui, sans-serif;
        }

        .stage {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .bg {
            position: absolute;
            inset: -6%;
            transform: translate3d(0,0,0);
        }

        .mosaic {
            position: absolute;
            inset: 0;
            display: grid;
            grid-template-columns: repeat(var(--cols), 1fr);
            grid-template-rows: repeat(var(--rows), 1fr);
            gap: 2px;
            filter: contrast(1.05) saturate(.95);
        }

        /* 背景磁磚牆暗遮罩：只壓暗背景，不影響前景 now-card */
        .mosaic-dim {
            position: absolute;
            inset: 0;
            background: rgba(0,0,0,.65);
            pointer-events: none;
            z-index: 2;
        }

        /* 確保 mosaic 在遮罩下面、tint/vignette 在上面 */
        .mosaic {
            z-index: 1;
        }

        .tint {
            z-index: 3;
        }

        .vignette {
            z-index: 4;
        }

        .tile {
            position: relative;
            overflow: hidden;
            background: #111;
            border-radius: 2px;
            perspective: 900px;
            transform: translateZ(0);
       ...