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;
}

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

.container-left,
.container-right {
  display: table-cell;
  vertical-align: top;
}

.container-right {
  padding: 0 0 0 4px;
}

input::placeholder {
  color: red;
  font-size: 22px;
  font-family: "Times New Roman", Times, serif;
}

input[type=text] {
 ...

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");
    const input = document.getElementById("clear");
    let canPlay = false;

    function playPauseIcon(play) {
        if (!canPlay) {
            return;
        }
        if (play) {
            button.classList.add("is-playing");
        } else {
            button.classList.remove("is-playing");
        }
    }
    button.addEventListener("click", function () {
        if (!canPlay) {
            return;
        }
        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);
    });
    input.addEventListener("click", function () {
        value.value = "";
        button.classList.remove("is-playing");
        player.pause();
        canPlay = false;
    }, false);
    player.oncanplaythrough = function () {
        if (value.value !== "") {
            canPlay = true;
            playPauseIcon(true);
        }
    };
}());