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

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("body").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.querySelectorAll(".exitInitial");
  cover.forEach(function addHandler(el) {
    el.addEventListener("click", coverClickHandler);
  });
}());

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

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

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

  function hideAll(elements) {
    elements.forEach(hide);
  }

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