JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container play2 with-curtain">
  <div class="inner-container curtain ">
    <div class="ratio-keeper">

      <div class="wrap">
        <div class="video video-frame"></div>
      </div>
      <div class="panel "></div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

<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" stroke="#000000"...

CSS

.panel.initial {
  background-color: #B76BF0;
}

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

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: 0;*/
  left: 0;
  right: 0;
  /*width: 100%;*/
  height: 0.55%;
  /*height: 2px;*/
  background: green;

}

.fenceInitial > div:nth-child(1) {
  top: 9.6%;
}

.fenceInitial > div:nth-child(2) {
  top:...

JavaScript

document.querySelectorAll('button.cover').forEach(function(button) {
  button.addEventListener('click', function(event) {
    let container = event.currentTarget.dataset.container;
    let myVideo = document.querySelector('.' + container + ' .video');
    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");
    }
    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 = {};

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