JSFiddle - React, Tailwind, and code Playground

HTML

<body class="fade">
   <div class="outer">
      <div class="container with-curtain">
         <button class="playa thePlay" pointer-events="none">
            <svg width="100%" height="100%" viewBox="0 0 64 64">
               <g id="play">
                  <title>Play</title>
                  <circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted"  />
                  <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
                     M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
               </g>
            </svg>
         </button>
         <div class="inner-container curtain curtain1">
            <div class="ratio-keeper">
               <div class="wrapa">
                  <div class="video video-frame" data-id="CHahce95B1g"></div>
               </div>
               <div class="panel-left"></div>
               <div class="panel-right"></div>
            </div>
            <button class="home" aria-label="Close"></button>
         </div>
      </div>
      <div class="container with-curtain">
         <button class="playb thePlay">
            <svg width="100%" height="100%" viewBox="0 0 64 64">
               <use href="#play" />
            </svg>
         </button>
         <div class="inner-container curtain curtain2">
            <div class="ratio-keeper">
               <div class="wrapa">
                  <div class="video video-frame"></div>
               </div>
               <div class="panel-left"></div>
               <div class="panel-right"></div>
            </div>
            <button class="home" aria-label="Close"></button>
         </div>
      </div>
      <div class="container with-curtain">
         <button class="playc thePlay">
            <svg width="100%" height="100%" viewBox="0 0 64 64">
               <use href="#play" />
            </svg>
         </button>
         <div...

CSS

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

body {
  background: #353198;
}

.fade {
  animation: fade 2s ease forwards;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.outer {
  display: flex;
  min-height: 100%;
  box-sizing: border-box;
  justify-content: center;
}

.container {
  display: flex;
  justify-content: center;
}

.container.active {
  flex: 1 0 0;
  animation: fadebody 5s ease 0s forwards;
  background-size: 165px 165px;
  background-image: linear-gradient(teal 5px, #0000 5px), linear-gradient(90deg, teal 5px, #0000 5px), linear-gradient(black 10px, #0000 10px 160px, black 160px), linear-gradient(90deg, black 10px, #0000 10px 160px, black 160px), linear-gradient(orange 15px, #0000 15px 155px, orange 155px), linear-gradient(90deg, orange 15px, #0000 15px 155px, orange 155px), linear-gradient(black 20px, #0000 20px 150px, black 150px), linear-gradient(90deg, black 20px, #0000 20px 150px, black 150px), linear-gradient(teal 25px, #0000 25px 145px, teal 145px), linear-gradient(90deg, teal 25px, #0000 25px 145px, teal 145px), linear-gradient(black 30px, #0000 30px 140px, black 140px), linear-gradient(90deg, black 30px, #0000 30px 140px, black 140px), linear-gradient(orange 35px, #0000 35px 135px, orange 135px), linear-gradient(90deg, orange 35px, #0000 35px 135px, orange 135px), linear-gradient(black 40px, #0000 40px 130px, black 130px), linear-gradient(90deg, black 40px, #0000 40px 130px, black 130px), linear-gradient(teal 45px, #0000 45px 125px, teal 125px), linear-gradient(90deg, teal 45px, #0000 45px 125px, teal 125px), linear-gradient(black 50px, #0000 50px 120px, black 120px), linear-gradient(90deg, black 50px, #0000 50px 120px, black 120px), linear-gradient(orange 55px, #0000 55px 115px, orange 115px), linear-gradient(90deg, orange 55px, #0000 55px 115px, orange 115px), linear-gradient(black 60px, #0000 60px 110px, black 110px), linear-gradient(90deg, black 60px, #0000 60px 110px, black 110px),...

JavaScript

const manageCover = (function makeManageCover() {
    const config = {};

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

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

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

    function showCovers(playButton) {
        const cover = playButton.parentElement;
        cover.classList.add("active");
        show(cover);
    }

    function coverClickHandler(evt) {
        hideAll(config.containers);
        const cover = evt.currentTarget;
        showCovers(cover);
    }

    function showHome() {
        const theActive = document.querySelector(".with-curtain.active");
        const theHides = document.querySelectorAll(".hide");
        const theBody = document.querySelector("body");
        theActive.classList.remove("active");
        theHides.forEach(function (removeHide) {
            removeHide.classList.remove("hide");
        });

        theBody.classList.remove("fade");
        void theBody.offsetWidth; //restart animation
        theBody.classList.add("fade");
    }

    function homeClickHandler(evt) {
        const home = evt.currentTarget;
        showHome(home);
    }

    function addClickToButtons(playButtons) {
        playButtons.forEach(function addEventHandler(playButton) {
            playButton.addEventListener("click", coverClickHandler);
        });
    }

    function addClickToHome(goHome) {
        goHome.forEach(function addEventHandler(goHome) {
            goHome.addEventListener("click", homeClickHandler);
        });
    }

    function addCoverHandler(coverSelector, handler) {
        const cover = document.querySelector(coverSelector);
        cover.addEventListener("click", handler);
    }


    function init(selectors) {
        config.containers = document.querySelectorAll(selectors.container);
        const playButtons = document.querySelectorAll(selectors.playButton);
        addClickToButtons(playButtons);
        const...