JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
    
    <div id="genre"><div id="select"></div></div>    
    <div id="genretitle"></div>
    
    <button id="left">left</button>
    <button id="up">up</button>
    <button id="down">down</button>
    <button id="right">right</button>
</div>

CSS

#main{
    position:fixed;
    margin:0;
    padding:0;
    height:540px;
    width:960px;
    border: 0px solid red;
    background-image:url("https://dl.dropboxusercontent.com/u/20956652/samsung/moidom/background1.png");
    background-color:#888;
    font-family:'Times New Roman',Times,serif;
}

#select{
    position:absolute;
    width:110px;
    height:110px;
    background-image:url("https://dl.dropboxusercontent.com/u/20956652/samsung/moidom/Home/select_small.png");
    #background-color:#c55311;
    #border-radius:5px;
   margin:5px 15px;
    #box-shadow:0px 0px 20px #c55311;
    display:none;
}

.itemdummy{
    position:absolute;
    top:370px;
    width:100px;
    height:400px;
}

.item{
    position:relative;
    width:100px;
    height:100px;
    float: left;    
    border-radius:20px;
    margin:10px 20px;
    background-image:url("https://dl.dropboxusercontent.com/u/20956652/samsung/moidom/Videoteka/vod_icon.png");

}

#genretitle{
    position:fixed;
    top: 415px;
    left: 200px;
    width:560px;
    height:80px;
color:white;
    text-align:center;
    font-size:4.5em;
    text-shadow: 0px 55px 30px #fff;
}

.itemtext{
    position:absolute;
    text-align:center;
     width:130px;
    color:white;
    top:95px;
    left:-15px;
    display:table-cell;
    font-size:1.2em;
}
.itemcount{
    position:absolute;
    text-align:center;
     width:130px;
    color:white;
    top:45px;
    left:-15px;
    display:table-cell;
    font-size:1.2em;
}

.shaddow{
    box-shadow:0px 0px 20px #0f0;
}

#genre{
    position:fixed;
    left:60px;
    top:50px;
    width:840px;
    height:370px;
    overflow:hidden;
}


button{
    position:relative;
    top:0px;
    width:50px;
}

JavaScript

var selected = 0;
var selectedoffset = 274;
var selectedleft = [129, 403, 678];
var genres = null;
var selectedpage = 0;

var genre_list = "https://dl.dropboxusercontent.com/u/20956652/samsung/moidom/api/vod_genres.txt";

jQuery(document).ready(function($) {
    
    $.getJSON( genre_list, function(data){
        genres = data.genres;
        updatePage();
        checkPos( 0, 0 );
    });
       
    $("#down").click(function(){  
        checkPos( 0, 1 );
    });
    $("#up").click(function(){
        checkPos( 0, -1 );
    });
    $("#right").click(function(){  
        checkPos( 1, 0 );
    });
    $("#left").click(function(){
        checkPos( -1, 0 );
    });
});

function updatePage(){
    $(".item").remove();
    var startidx = selectedpage*18;
    var idx = 0;
    if( 0 == selectedpage){
        addGenre( {name :"все фильмы", id : 999 }, false );
        addGenre( {name :"поиск по имени", id : 888 }, false );
        addGenre( {name :"поиск по годам", id : 777 }, false );
    }
    for( var count=startidx;count < genres.length && idx < 18;count++,idx++ ){
        addGenre( genres[count], true );
    }
}

function addGenre( genre, count )
{
    var rondom = "";
    if( count ){
        rondom = Math.floor((Math.random()*100)+1);
    }
    var newgenre = $("<div class='item'><div class='itemcount'>"+ rondom +"</div><div class='itemtext'>"+genre.name+"</div></div>");
    $("#genre").append( newgenre );
    
}

function checkPos( lr, ud )
{
    var max = genres.length;
    var $sel = $("#select");
    
    if(lr) selected += lr;
    if(ud) selected += ud*6;
    
    if( 0 > selected)
        selected = max-1;
    
    if( selected >= max )
        selected =0;       
    
    var page = Math.floor( selected / 18);
    if( selectedpage != page ){
        selectedpage = page;
        $sel.hide();
        updatePage();
    }    
    
    var selpos = selected%18;
    selectItem( selpos, $sel );

}

function selectItem( selpos, $sel )
{
    var position =...