JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container play1 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"...

CSS

.panel.panel2  {
  background-color: red;
}

body.initial {
  --color-a: #379DEB;
}

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

body {
  background: #353198;
  /*  animation: fadeInBody1 0s ease forwards;*/
}

/*@keyframes fadeInBody1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}*/

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

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


/*
.fanInitial.exitIsOpen {
  display: none;
}

.playInitial.exitIsOpen {
  display: none;
}

.exitInitial.exitIsOpen {
  display: none;
}*/

.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;


  /*position: absolute;
  left: 0;
  right: 0;*/
  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);
 ...

JavaScript

const myVideo = document.querySelector('.video');

document.querySelectorAll('button.cover').forEach(function(button) {
  button.addEventListener('click', function(event) {
    myVideo.dataset.id = event.currentTarget.dataset.id;
  });
});

(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");
      initial.classList.remove("initial");
    }
    allInitials.forEach(hideInitial);
  }
   /* function resetInitial2(initialSelector) {
    const allInitial = document.querySelectorAll(initialSelector);

    function removeInitial(initial) {
      initial.classList.remove("initial");
    }
    allInitial.forEach(removeInitial);
  }*/

  function resetPage() {
    resetInitial(".containerInitial");
   //  resetInitial2(".initial");
  }

  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);
  });
}());

(function randomBackground() {
  const classNames = [

    "bg2",
    "bg3"
  ];

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

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...