JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<span class="bebas"> text </span>
<div class="mediaplayer inactive">
    <div id="controlbar">
        <div class="control button">
            <svg height="50px" width="50px" viewBox="0 0 50 50">
                <path d="M19.3,16.1l12.3,8.1c0.5,0.3,0.5,1.1,0,1.4l-12.3,8.1c-0.6,0.4-1.3,0-1.3-0.7V16.9  C18,16.2,18.8,15.8,19.3,16.1z" />
            </svg>
        </div>
        <div class="control progressbar">
            <svg id="progress" height="50px" viewBox="0 0 50 50" preserveAspectRatio="none" >
                <path d="m 0,25 50,0" />
            </svg>
            <svg height="50px" width="50px" viewBox="0 0 50 50">
                <text x="13.5" y="31">00:00</text>                
            </svg>
        </div>
        <div class="control button">
            <svg height="50px" width="50px" viewBox="0 0 50 50">
                <text x="13.5" y="31">SUB</text>                
            </svg>
        </div>
        <div class="control button">
            <svg height="50px" width="50px" viewBox="0 0 50 50">
                <polygon points="20.7,21.3 16.9,21.3 16.9,28.8 20.7,28.8 26.9,35 26.9,15  " />
                <path d="M33.1,25c0-2.6-1.5-4.8-3.7-5.8v1.3c0.4,0.2,0.7,0.5,1,0.8c1,1,1.5,2.3,1.5,3.7c0,1.4-0.5,2.7-1.5,3.7   c-0.3,0.3-0.7,0.6-1,0.8v1.3C31.6,29.8,33.1,27.6,33.1,25z" />
            </svg>
        </div>
        <div class="control button">
           <svg height="50px" width="50px" viewBox="0 0 50 50">
               <path d="M35,26.1v-2.2h-2.6c-0.2-1.3-0.7-2.4-1.4-3.4l1.8-1.8l-1.6-1.6l-1.8,1.8c-1-0.7-2.1-1.1-3.3-1.3V15h-2.2v2.6  c-1.3,0.2-2.4,0.7-3.4,1.4l-1.8-1.8l-1.6,1.6l1.8,1.8c-0.7,1-1.1,2.1-1.3,3.3H15v2.2h2.6c0.2,1.3,0.7,2.4,1.4,3.4l-1.8,1.8l1.6,1.6  l1.8-1.8c1,0.7,2.1,1.1,3.3,1.3V35h2.2v-2.6c1.3-0.2,2.4-0.7,3.4-1.4l1.8,1.8l1.6-1.6l-1.8-1.8c0.7-1,1.1-2.1,1.3-3.3H35z M25,29.1  c-2.2,0-4.1-1.8-4.1-4.1s1.9-4.1,4.1-4.1s4.1,1.8,4.1,4.1S27.3,29.1,25,29.1z" />
            </svg>
        </div>
        <div class="control button">
        ...

CSS

@font-face {
    font-family: "bebasneue";
    font-style: normal;
    font-weight: 400;
    src:...

JavaScript

(function setEvents(){
    var mediaplayer=document.getElementsByClassName("mediaplayer")[0];
    var mediaActive=0;
    mediaplayer.onclick=function(){
        mediaActive=(1-mediaActive);
        if(mediaActive){
            mediaplayer.classList.remove("inactive");
            mediaplayer.classList.add("active"); 
        }else{
            mediaplayer.classList.remove("active");
            mediaplayer.classList.add("inactive");
        }
    }
})();