JSFiddle - React, Tailwind, and code Playground

HTML

<div class='outer'>
  <div class='tcell'>

    <audio autoplay id="player"></audio>

    <div class="wrape">
      <ul class="nav">
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3 15v1h-12v-1h12zm0-3v1h-12v-1h12zm0-3v1h-12v-1h12zm-2-4h4.586l-4.586-4.586v4.586z"/></svg>
</a></li>
        <li><a href="" target="_blank">
  <svg class="link" width="44" height="44" viewbox="-6 -6 35 35"><path d="M22 24h-20v-24h14l6 6v18zm-7-23h-12v22h18v-16h-6v-6zm3...

CSS

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

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

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

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  overflow: hidden;
  background: #000000;
  border-radius: 25px;
}

.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  margin: 0;
  padding: 0;
  float: left;
}

.wrape .nav li a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: #000000;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.wrape .nav li:nth-of-type(n+11) a {
  margin: 0 4px 0 0;
}

.wrape .nav li:nth-of-type(5n) a {
  margin-right: 0;
}

.wrape .nav li:nth-of-type(8) a {
  opacity: 0;
  border: none;
  background: none;
}

.wrape .nav li:nth-of-type(1) a {
  border-top-left-radius: 25px;
}

.wrape .nav li:nth-of-type(5) a {
  border-top-right-radius: 25px;
}

.link {
  fill: #0059dd;
}

.wrape .nav li:nth-of-type(11) a {
  border-bottom-left-radius: 25px;
}

.wrape .nav li:nth-of-type(15) a {
  border-bottom-right-radius: 25px;
}

.btn {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background: #000000;
  cursor: pointer;
}

.btn .play,
.btn .pause {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  fill: #0059dd;
  margin: auto;
  background: #000000;
}

.btn .pause {
  left: 0;
}

.pause {
  display: none;
}

.is-playing .play {
  display: none;
}

.is-playing .pause {
  display: block;
}

.info {
  display: table;
  white-space: nowrap;
  margin-top: 30px;
  background: red;
}

label {
  font-size: 22px;
  color: #0059dd;
  font-family: "Times New Roman", Times, serif;
}

input[type=text] {
  font-size: 22px;
  width: 200px;
  color: #0059dd;
  background: #000000;
  border: 1px solid #0059dd;
}

input[type=submit] {
  font-size: 22px;
  color: #0059dd;
 ...

JavaScript

(function iife() {
  "use strict";
  const player = document.getElementById("player");
  const button = document.getElementById("button");
  const value = document.getElementById("input");
  const sent = document.getElementById("sent");

  function playPauseIcon(play) {
    if (play) {
      button.classList.add("is-playing");
    } else {
      button.classList.remove("is-playing");
    }
  }
  button.addEventListener("click", function() {
    if (player.paused) {
      player.play();
      playPauseIcon(true);
    } else {
      player.pause();
      playPauseIcon(false);
    }
  });
  button.addEventListener("mousedown", function(evt) {
    if (evt.detail > 1) {
      evt.preventDefault();
    }
  }, false);
  sent.addEventListener("click", function() {
    player.src = value.value;
    player.volume = 1.0;
    playPauseIcon(true);
  });
}());