JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
    
    <div id="mainview"></div> 
    <div id="maintop">
            <div class="top_time"></div>
            <div class="top_week"></div>
            <div class="top_date"></div>
    </div> 
    <div id="moviename"></div>
    <div id="movieinfo"></div>
    <div id="moviefanart"><img class='movieshadow hidden' id="fanart" width='480px' heigth='270px' src='' /></div>
    <div id="mainbar"></div>
    <input id="anchor" type="hidden" value="" />

</div>

CSS

#main{
    position:fixed;
    top:0px;
    left:0px;
    margin:0;
    padding:0;
    height:720px;
    width:1280px;
    #border: 0px solid red;
    background-color:#111;
    #box-shadow:inset 0px 0px 20px #222;
    overflow:hidden;
}

#moviename
{
    position:fixed;
    top:390px;
    left:0px;
    margin:0;
    padding:0;
    height:70px;
    width:1280px;
    font-size:3em;
    text-align:center;
    #border: 0px solid red;
    font-family: NeoSans;
    #background-color:#888;
    #box-shadow:inset 0px 0px 20px #222;
    overflow:hidden;
    color:#FF7F00;
    text-shadow:0px 0px 25px #000;
}

#movieinfo
{
    position:fixed;
    top:110px;
    left:100px;
    margin:5px;
    padding:5px;
    height:255px;
    width:480px;
    font-size:1em;
    text-align:left;
    #border: 0px solid red;
    font-family: NeoSans;
    #background-color:#888;
    box-shadow:0px 0px 30px #000;
    overflow:hidden;
    color:#ddd;
    #text-shadow:0px 0px 25px #000;
}
.hidden{
display:none;
}
#moviefanart
{
    position:fixed;
    top:110px;
    left:700px;
    margin:0;
    padding:0;
    height:270px;
    width:480px;
    #border: 0px solid red;
    font-family: NeoSans;
    background-color:#666;
    box-shadow:0px 0px 30px #000;
    overflow:hidden;
    background-image:url(https://dl.dropboxusercontent.com/u/20956652/samsung/tmp/teka/bg.png);
}

.movieshadow{
    box-shadow:0px 0px 30px #000;
}

@font-face
{
    font-family: NeoSans;
    src: url('http://mywidget.tv/ktv/kartina/font/NeoSansPro-Regular.ttf');
}

#mainview{
    position:fixed;
    top:450px;
    margin:0;
    padding:20px;
    height:160px;
    width:1240px;
    #border: 1px solid black;
    background-color:#666;
    box-shadow:inset 0px 0px 20px #000;
    overflow:hidden;
}

















.cover{
    float:left;
    margin:9px;
    #margin:0px;
    width:105px;
    height:144px;
    border: 0px solid #fff;
    border-radius:5px;
    box-shadow:0px 0px 25px #000;
}

.sort{
    float:left;
   ...

JavaScript

var sortlist = "http://mywidget.tv/ktv/kartina/vod/get.php?sortlist";
var api = "http://mywidget.tv/ktv/kartina/vod/get.php";
var page = "http://mywidget.tv/ktv/kartina/vod/poster";
var loaded = false;
var fanartoff ="https://dl.dropboxusercontent.com/u/20956652/samsung/tmp/teka/"

bartimer = null;
sortarray = null;
coverperpage = 10;
coverperline = 10;

var mysortlist =null;
var vodlist = null;

var entryColor = "#222";
var entryColorSel = "#E86F00";

selected = 0;
selectedEntry = 0;
focus = 0;

jQuery(document).ready(function($) {
    showTime();
    $.get( sortlist , function( list ){
        mysortlist = list.sortlist ;
        for ( var idx in mysortlist ){
            //   alert( list[idx].name );
            //sortarray.push( idx );
            $("#mainbar").append('<div id="entry" class="menuentry entry_back">'+ mysortlist[idx].name +'</div>');
        
        } 
        loaded = true;
        select(0);         
        showBar();        
        onEntryEnter();
    }).error( function( xj, status, info)
             { alert(  sortlist + status + info);
    });

    $(document).on('keyup', function(event){
        event.preventDefault()
        var keycode = event.which || event.keyCode; // Ex : 112
        //alert( keycode );
        switch( keycode ){
            case 96: // 0(Einfg)
            case 17: // 0
                toggleBar();
                break;
            case 37: // left
            case 4: // left
                goLeft();
                break;
            case 5: // right
            case 39: // right
                goRight();                
                break;
            case 29460: // up
            case 38: // up
                goUp();
                break;
            case 29461: // down
            case 40: // down
                goDown();
                break;
            case 29443: // enter
            case 13: // enter
                if( focus == 0 ){
                    focus=1;
                    goEntryDown(...