JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>
<div id="container2"></div>

CSS

div {
    margin:0;
    padding:0;
    
}

.barra{
    width:300px;height:80px; background-color:#CCC;  
}

.navegacion{
    width:5px; height:80px;  position:absolute; left:0; top:0; background-color:#900;  
}

.contenedor_barra{
width:300px; margin:0 auto; position:relative;    
}

JavaScript

function reproductor(tiempo, contenedor, ini_pausado, click_trigger,  pause_callback){
    function createDelegate(object, method)
{
    var shim = function()
                {
                    method.apply(object, arguments);
                }
    return shim;
}
    var now = new Date();
    var unicoID = String(now.getHours()) + String(now.getMinutes()) + String(now.getSeconds() + String(now.getMilliseconds()));
    document.getElementById(contenedor).innerHTML = '<div class="contenedor_barra"><div id="barra'+unicoID+'" class="barra"></div><div id="navegacion'+unicoID+'" class="navegacion"></div><div id="time'+unicoID+'">0:00</div><button id="playnot'+unicoID+'" class="pause">Pausar/Seguir</button></div>'
    var ancho;
    var navegacion_ancho;
    var mysheets=document.styleSheets
    for(var i=0;i<mysheets.length;i++){
    var mysheet = mysheets[i];
    var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules
        for (i=0; i<myrules.length; i++){
                if(myrules[i].selectorText.toLowerCase()==".barra"){
                    ancho=myrules[i].style.width;
                } else if(myrules[i].selectorText.toLowerCase() == ".navegacion"){
                    navegacion_ancho =     myrules[i].style.width;                    
                }
        }    
        if(!navegacion_ancho){navegacion_ancho="5px"}
        if(!ancho){ancho="300px"}
    }
    this.tiempo = tiempo;
    this.intevalo =  31.25;
    this.avanze = this.intevalo/1000;
    this.algo = "algo";
    this.barra = document.getElementById("barra"+unicoID);
    this.navegacion = document.getElementById("navegacion"+unicoID)
    this.time = document.getElementById("time"+unicoID);
    this.botonPausar = document.getElementById("playnot"+unicoID)
    this.segundos =  Number(this.tiempo.split(":")[0] * 60) + Number(this.tiempo.split(":")[1])
    this.pasos = ancho.replace("px","") / this.segundos
    this.segundoActual = 0;    
    this.pausado = ini_pausado || false;
   ...