JSFiddle - React, Tailwind, and code Playground

HTML

<!-- (голова) -->
<!-- -- YouTube tag stuff -- -->
<style>
    .yt-player{
        border: 1px dashed #F7BD6A;
        width:  360px;
        height: 235px;
        cursor: pointer;
    }
    .yt-player-title{
        color: #FFFFFF;
        position:absolute;
        top: 14px;
        left: 30px;
        font-size: 0.95em;
        text-shadow: 4px 4px 2px #000000;
        cursor: text;
    }
    .yt-player-title-bg{
        background: #323232;
        opacity: 0.8;
        position:absolute;
        top: 10px;
        margin-left: 2px;
        width: 358px;
        height: 27px;
        cursor: default;
    }
    .yt-player-link{
        background: url('https://youtube.com/favicon.ico') no-repeat
                                      scroll left center transparent;
        color: #F60;
        font-size: 0.8em;
        padding-left: 20px;
        margin-left: 5px;
        margin-top: -5px;
        border-bottom: 1px dotted #F60;
    }
</style>
<script>
    function String_toHHMMSS(t){
        var sec_num = parseInt(t, 10); // don't forget the second param
        var hours   = Math.floor(sec_num / 3600);
        var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
        var seconds = sec_num - (hours * 3600) - (minutes * 60);
        var time = ''
        if (hours   < 10) {hours   = "0"+hours;}
            if(hours!='00') time+=hours+':';
        if (minutes < 10) {minutes = "0"+minutes;}
            if(minutes!='00') time+=minutes+':';
        if (seconds < 10) {seconds = "0"+seconds;}
            time+=seconds;
        return time;
    }
    function ytPlayer_Init(el){ //Init the preview box
        var video_id = el.id;
        // -- container ----------------------
        var ytPlayer = document.createElement('div');
            ytPlayer.className = 'yt-player';
          el.appendChild(ytPlayer);
        // -- preview image ------------------
        var ytPlayerImg = document.createElement('img');
            ytPlayerImg.src =...