JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="curtain">
    <div class="ratio-keeper">
      <div class="wrap hide">
        <div class="video video-frame"></div>
      </div>

      <div class="panel-left"></div>
      <div class="panel-right"></div>

    </div>
  </div>
  <button class="play" type="button" aria-label="Open"></button>
</div>

CSS

.bg1 {
  --color-a: blue;
  --color-b: black;
  --color-c: red;
  --color-d: black;
}

.bg2 {
  --color-a: purple;
  --color-b: black;
  --color-c: purple;
  --color-d: black;
}

.bg3 {
  --color-a: green;
  --color-b: black;
  --color-c: green;
  --color-d: black;
}

.bg4 {
  --color-a: orange;
  --color-b: black;
  --color-c: orange;
  --color-d: black;
}

.bg5 {
  --color-a: yellow;
  --color-b: black;
  --color-c: yellow;
  --color-d: black;
}

.bg6 {
  --color-a: blue;
  --color-b: black;
  --color-c: orange;
  --color-d: black;
}

.bg7 {
  --color-a: red;
  --color-b: black;
  --color-c: green;
  --color-d: black;
}

.bg8 {
  --color-a: white;
  --color-b: black;
  --color-c: white;
  --color-d: black;
}

.bg9 {
  --color-a: red;
  --color-b: black;
  --color-c: red;
  --color-d: black;
}

.cr1 {
  --image-a: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'> <filter id='filter'> <feTurbulence baseFrequency='0.01 0.0001' numOctaves='5'/> <feColorMatrix values='1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1'/></filter> <rect width='100%' height='100%' filter='url(%23filter)'/> </svg>");

}

.cr2 {
  --image-a: radial-gradient(60% 60% at 50% 50%, rgb(40, 0, 115), rgb(0, 0, 0));
  ;
}

.cr3 {
  --image-a: linear-gradient(301deg, rgba(44, 34, 150, 0), #7b2297), linear-gradient(rgba(0, 82, 154, .95), rgba(0, 82, 154, .95)), linear-gradient(121deg, #3fcc6f, #3fcc6f), linear-gradient(238deg, rgba(173, 32, 142, 0), #ad208e), linear-gradient(42deg, rgba(0, 190, 213, 0), rgba(0, 190, 213, .85) 85%, rgba(0, 190, 213, .87) 87%, #00bed5), linear-gradient(126deg, rgba(0, 190, 213, 0), #00bed5), linear-gradient(#594099, #594099);
}

.cr4 {
  --image-a: linear-gradient(120deg, #155799, #159957);
}

.cr5 {
  --image-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.cr6 {
  --image-a: linear-gradient(45deg, #102eff, #d2379b);
}

.cr7 {
  --image-a: radial-gradient(rgba(80, 0, 0, 0.1) 0%, rgba(80, 0, 0, 0.2) 30%, rgba(21, 11, 1, 0.9) 100%),...

JavaScript

(function randomBackground() {
  const classNames = [
    "bg1",
    "bg2",
    "bg3",
    "bg4",
    "bg5",
    "bg6",
    "bg7",
    "bg8",
    "bg9"
  ];

  const random = Math.floor(Math.random() * classNames.length);
  document.querySelector("body").classList.add(classNames[random]);
}());

(function randomCurtain() {
  const classNames = [
    "cr1",
    "cr2",
    "cr3",
    "cr4",
    "cr5",
    "cr6",
    "cr7",
    "cr8",
    "cr9"
  ];

  const random = Math.floor(Math.random() * classNames.length);
  document.querySelector("body").classList.add(classNames[random]);
}());


const manageCover = (function makeManageCover() {
  const events = {};

  function show(el) {
    el.classList.remove("hide");
  }

  function hide(el) {
    el.classList.add("hide");
  }

  function openCurtain(cover) {
    hide(cover);
    const curtain = document.querySelector(".curtain");
    curtain.classList.add("slide");
    return curtain;
  }

  function showVideo(curtain) {
    const thewrap = curtain.parentElement.querySelector(".wrap");
    show(thewrap);
  }

  function coverClickHandler(evt) {
    const cover = evt.currentTarget;
    const curtain = openCurtain(cover);
    showVideo(curtain);
  }

  const cover = document.querySelector(".play");
  cover.addEventListener("click", coverClickHandler);
}());

const videoPlayer = (function makeVideoPlayer() {
  const config = {};
  let player = null;

  function loadIframeScript() {
    const tag = document.createElement("script");
    tag.src = "https://www.youtube.com/iframe_api";
    const firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  }

  function onYouTubeIframeAPIReady() {
    const cover = document.querySelector(".play");
    const wrapper = cover.parentElement;
    const frameContainer = wrapper.querySelector(".video");
    videoPlayer.addPlayer(frameContainer, config.playlist);
  }

  function shufflePlaylist(player) {
   ...