JSFiddle - React, Tailwind, and code Playground

HTML

<body class="initial">
<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.initial {
  background-color: #B76BF0;
}

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

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

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


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

body {
  background: #353198;
  /*  animation: fadeInBody1 0s ease forwards;*/
}
body.initial {
  --color-a: #379DEB;
 background: #353198;
}

body.fadingOut {
  --color-a: #379DEB;
 background: #353198;
}
/*@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...

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 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 allBackgrounds = document.querySelectorAll(backgroundSelector);

    function hideBackground(background) {
      background.classList.add("bg1");
    }
    allBackgrounds.forEach(hideBackground);
  }

  function resetButtons(buttonSelector) {
    const allButtons = document.querySelectorAll(buttonSelector);

    function hideButton(button) {
      button.classList.add("isOpen");
    }
    allButtons.forEach(hideButton);
  }

  function resetPage() {
    resetBackground("body");
    resetButtons(".container");

  }

  function markAsPlayed(played) {
    played.classList.add("played");
  }

  /*function showCover(playButton) {
    hideAll(config.containers);
    resetPage();
    markAsPlayed(playButton);
    const cover = playButton.parentElement;
    cover.classList.add("active");
    show(cover);
  }*/

  function showCover(playButton) {
    hideAll(config.containers);
    resetPage();
    markAsPlayed(playButton);
    const playButtonContainer = playButton.parentElement;
    const container = document.getElementsByClassName(playButton.dataset.container)[0];
    playButtonContainer.classList.add("active");
   ...