JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container play2 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="fence">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
      <div class="fan">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="76 130 381 381">
          <g id="fan">
            <title>Fan</title>
            <path fill="#000100" stroke="#000000"...

CSS

.play2 {
  --color-a: #379DEB;
}
body.bg2 {
  --color-a: #350048;
}

body.bg3 {
  --color-a: #0e1538;
}

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

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

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

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}


body {
  background: #353198;
}

/*body.*/
.initial-fade {
  animation: initial-fade 500ms ease forwards;
}

@keyframes initial-fade {
  to {
    opacity: 0;
  }
}

.containerInitial.exitIsOpen {
  display: none;
}

.containerInitial.active {
  display: none;
}

.initial-fade,
.fadingOut {
  cursor: default;
}


.containerInitial {
  background: #353198;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  min-height: 100%;
  min-width: 255px;
  display: flex;
  padding: 8px 8px;
}

.sun,
.musicdoesalot,
.fanInitial,
.sun::before,
.fenceInitial,
.crossInitial::before,
.crossInitial::after,
.musicdoesalot1,
.fanInitial svg {
  position: absolute;
  inset: 0 0 0 0;
}

.fanInitial {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  max-width: 380px;
  width: 100%;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1 /1;
  background: linear-gradient(to top, #e10019 0%, #957e00 100%);
}

.sun {
  mix-blend-mode: soft-light;
}

.sun:before {
  content: "";
  background: radial-gradient(white, yellow 30%, #ff4d00, transparent 70%) no-repeat -20% 100% / 50% 50%;
}

.fenceInitial {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background:
    linear-gradient(45deg,
      #0000 7px,
      black 0 7.5px,
      #0000 0 10px),
    linear-gradient(-45deg,
      #0000 7px,
      black 0 7.5px,
      #0000 0 10px);
  background-size: 10px 10px;

  filter: drop-shadow(0 0 5px #000);
  -webkit-animation: fade 5s infinite;
  animation: fade 5s infinite;

}

.fenceInitial>div {
  position: absolute;
  /*top:...

JavaScript

/*global YT */
/*jslint browser:true */
/*jslint devel: true */

document.querySelectorAll("button.cover").forEach(function (button) {
    button.addEventListener("click", function (event) {
        const container = event.currentTarget.dataset.container;
        const myVideo = document.querySelector("." + container + " .video");
        myVideo.dataset.id = event.currentTarget.dataset.id;
    });
});

(function randomBackground() {
    const classNames = [
        "bg2",
        "bg3"
    ];

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

(function randomCurtain() {
    const classNames = [
        "cr1",
        "cr2",
        "cr3"
    ];

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

(function manageExitInitial() {

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

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

    function resetInitial(initialSelector) {
        const allInitials = document.querySelectorAll(initialSelector);

        function hideInitial(initial) {
            initial.classList.add("exitIsOpen");
        }
        allInitials.forEach(hideInitial);
    }


    function resetPage() {
        resetInitial(".containerInitial");
    }

    function coverClickHandler(evt) {
        resetPage();
        const cover = evt.currentTarget;
        const thewrap = document.querySelector(".playButtonContainer");
        hide(cover);
        show(thewrap);
    }

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

const manageCover = (function makeManageCover() {
    const config = {};
    const body = document.body;
    let currentPlayButton = {};

    function resetBackground(backgroundSelector) {
        const allBackgrounds =...