JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
    <div id="bg0" class="main"></div>
<div id="bg1" class="main"></div>
<div id="bg2" class="main"></div>
<div id="bg3" class="main"></div>
    
    <div id="top"></div>
    <div id="mid"></div>
    <div id="bottom">
        <div id="navmenu"></div>
    </div>
    <div id="submenu" class="hidden"></div>
    <a id="anchor" href="#"></div>
</div>

CSS

#navmenu{
    padding:5px;
}

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


.menuentry{
    #margin:5px;
    #background-color:red;
    float:left;
    height:76px;
    width:315px;
    font-size:3em;
    text-align:center;
    line-height: 76px; 
    vertical-align: middle;
    border:1px solid #555;
    
     font-family: NeoSans;
    
    background-image:url(https://dl.dropboxusercontent.com/u/20956652/samsung/kartina/menuentry_back_76.png);
    
    #-webkit-background-clip: text; 
    #color: transparent;
    color:silver;
    #text-shadow:5px 5px 20px #000;
    text-shadow:1px 1px 5px #000, 0px 0px 2px silver;
    
}

.menu_selected{
    box-shadow:0 0 5px #000;
    background-image:url(https://dl.dropboxusercontent.com/u/20956652/samsung/kartina/menuentry_back_76_sel.png);
    #background: url(http://dl.dropboxusercontent.com/u/20956652/samsung/kartina/bg_1_76_sel.png), black;
    #-webkit-background-clip: text; 
    #color: transparent;
    
}

#submenu{
    width:317px;
    background-color:#000;
    #height:300px;
    position:absolute;
    bottom:176px;
    left:615px;
    box-shadow:0 0 5px #000, inset 0 0 4px #000;
    
}
.hidden{
    display:none;
}

.submenu_delimiter{
    color:#000;
    width:313px;
    height:6px;
    margin:2px;

    text-align:center;
    position:relative;
    display: block;
    font-size:2em;
    line-height: 66px; 
    vertical-align: middle;
    font-family: NeoSans;
    
    background-image:url(https://dl.dropboxusercontent.com/u/20956652/samsung/kartina/menuentry_back_76_sel.png);
}

.submenu_entry{
    color:silver;
    width:313px;
    height:66px;
    margin:2px;
    #padding:10px;
    text-align:center;
    position:relative;
    display: block;
    font-size:2em;
    line-height: 66px; 
    vertical-align: middle;
    font-family: NeoSans;
    text-shadow:1px 1px 5px #333, 0px 0px 2px silver;
   ...

JavaScript

var navmenu = ["ТВ", "ВИДЕОТЕКА", "НАСТРОЙКИ", "ПОМОЩЬ" ];
var mainmenubg = ["back.png", "vid.jpg", "settings.jpg", "help.jpg" ];
var selected = 0;

$(document).ready(function(){
    for( idx in navmenu)
        $("#navmenu").append('<div class="menuentry">'+navmenu[idx]+'</div>');
    
    for( idx in mainmenubg){
       var img = new Image();
       img.src = "http://dl.dropboxusercontent.com/u/20956652/samsung/kartina/" + mainmenubg[idx];
        $("#bg"+idx).css({"background-image":"url(" + img.src + ")"});
    }
    $(".main").stop().fadeOut();
    $("#main").click(function(){
        $("#anchor").focus() ;
    });
       
    
    var TEST = "TEST";    
    $("#submenu")
        .append('<div class="submenu_entry">ГЛАВНЫЕ</div>')
        .append('<div class="submenu_entry submenu_selected">ВИД</div>')
        .append('<div class="submenu_entry">ТЕСТ</div>')
        .append('<div class="submenu_delimiter"></div>');
    
    $("#anchor")
        .keydown(function(){            
            //alert( event.keyCode);
            switch( event.keyCode ){
                case 39:
                    select( 1 );
                    break;
                case 37:
                    select( -1 );
                    break;
                default:
                    break;                    
            }
        })
    .focus() ;    
    select( 0 );
    
    
});

function select( pos ){
    
    
    if( 2 == selected && pos != 0 )
        $("#submenu").stop().fadeOut(10);        
    $(".menuentry")
        .eq(selected).removeClass("menu_selected");
    
    selected += pos;
    if( 0 > selected ) selected = navmenu.length-1;
    if( navmenu.length <= selected ) selected = 0;
    var selmenu = $(".menuentry").eq(selected);

    selmenu.addClass("menu_selected");
    
    if( 2 == selected )
        $("#submenu").css("left", selmenu.offset().left).stop(true, true).fadeIn(300);
    
    setTimeout( function(){ $(".main").not(selected).stop().fadeOut(200);...