JSFiddle - React, Tailwind, and code Playground

HTML

<audio></audio>
<div class="outer">
  <div class="tcell">

    <svg class="play" width="100%" height="100%" viewBox="0 0 64 64">
      <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" />
    </svg>

    <div class="container hide">
      <div class="wrap">

        <div class="playButton b1" style="margin:2px 2px;" data-audio="http://getradio.me/svoefm">
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></div>
            <div class="shadow"></div>
          </div>
        </div>
        <div class="playButton b2" style="margin: 2px 2px 0 196px;" data-audio="https://getradio.me/rcm">
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></div>
            <div class="shadow"></div>
          </div>
        </div>
        <div class="playButton b3" style="margin: 2px 0 0 390px;" data-audio="https://getradio.me/spdeep">
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></div>
            <div class="shadow"></div>
          </div>
        </div>
        <div class="playButton b4" style="margin:241px 0 0 2px;" data-audio="https://radio.nueuphoria.com:8443/live">
          <div class="button">
            <div class="light"></div>
            <div class="dots"></div>
            <div class="characters"></div>
            <div class="shine"></div>
            <div class="shadow"></div>
          </div>
        </div>
        <div class="playButton b5" style="margin:241px 0 0 196px;" data-audio="http://getradio.me/svoefm">
          <div...

SCSS

$color: #ff1818;
$color2: orange;
$color3: orangered;
$color4: gold;
$color5: blue;
$color6: cyan;
$color7: skyblue;
$color8: yellowgreen;
$color9: darkseagreen;


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

body {
  background: #353198;
  animation: fade 2s ease 0s forwards;
}

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

  100% {
    opacity: 1;
  }
}

.outer {
  display: table;
  height: 100%;
  margin: 0 auto;
  width: 100%;
}

.tcell {
  display: table-cell;
  vertical-align: middle;
  padding: 8px 8px;
}

.container {
  position: absolute;
  top: 0;
  left: 0;
  /* bottom: 0;*/
  right: 0;
  width: 100%;
  /*height: 100%;*/
  min-height: 100%;
  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),
 ...

JavaScript

(function manageCover() {

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

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

    function coverClickHandler(evt) {
        const cover = evt.currentTarget;
        hide(cover);
        const thewrap = cover.parentElement.querySelector(".container");
        show(thewrap);
    }

    const cover = document.querySelector(".play");
    cover.addEventListener("click", coverClickHandler);
}());

(function initPlayButtons() {

    function getButtonContainer(el) {
        while (el.classList.contains("playButton") === false) {
            el = el.parentNode;
        }
        return el;
    }

    function getPlay(button) {
        return button;
    }

    function showPlayButton(button) {
        button.classList.remove("active");
    }

    function isPlaying(button) {
        const play = getPlay(button);
        return play.classList.contains("active");
    }

    function pauseAllButtons() {
        let buttons = document.querySelectorAll(".playButton");
        buttons.forEach(function hidePause(buttons) {
            if (isPlaying(buttons)) {
                showPlayButton(buttons);
            }
        });
    }

    function showPauseButton(button) {
        pauseAllButtons();
        button.classList.add("active");
    }

    function getAudio() {
        return document.querySelector("audio");
    }

    function playAudio(player, src) {
        player.volume = 1.0;
        if (player.getAttribute("src") !== src) {
            player.setAttribute("src", src);
        }
        player.play();
    }

    function showButton(button, opts) {
        if (opts.playing) {
            showPlayButton(button);
        } else {
            showPauseButton(button);
        }
    }

    function pauseAudio(player) {
        player.pause();
    }

    function manageAudio(player, opts) {
        if (opts.playing) {
            pauseAudio(player);
        } else {
           ...