JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="mainshadow">
</div>
<div id="main">    
</div>
<div id="coverbar">   
    <div id="coverset">
		<div class="leftcover animateCover cover c0 hidden"></div>
        <div class="leftcover animateCover cover c1"></div>
        <div class="leftcover animateCover cover c2"></div>
        <div class="leftcover animateCover cover c3"></div>
        <div class="leftcover animateCover cover c4"></div>
        <div class="leftcover animateCover cover c5"></div>
        <div class="leftcover animateCover cover c6"></div>
        <div class="leftcover animateCover cover c7"></div>
		<div class="cover c8"></div>

        <div class="rightcover animateCover cover c16"></div>
        <div class="rightcover animateCover cover c15"></div>
        <div class="rightcover animateCover cover c14"></div>
        <div class="rightcover animateCover cover c13"></div>
        <div class="rightcover animateCover cover c12"></div>
        <div class="rightcover animateCover cover c11"></div>
        <div class="rightcover animateCover cover c10"></div>
		<div class="rightcover animateCover cover c9 hidden"></div>
    </div> 
</div>

CSS

#main, #mainshadow {
    position:fixed;
    top:0px;
    left:0px;
    margin:0;
    padding:0;
    height:540px;
    width:960px;
    #border: 0px solid red;
    background-color:#000;
    box-shadow:inset 0px 0px 140px #111;
    overflow:hidden;
    background-image:url(http://dl.dropboxusercontent.com/u/20956652/samsung/vod/8.jpg);
}
#mainshadow {
    #background-color:#f55;
}
#coverbar {
    position:fixed;
    top:270px;
    left:0px;
    margin:10px;
    padding-top:50px;

    height:220px;
    width:950px;
    #border: 0px solid red;
    #background-color:#1f1;
    #box-shadow:0px 0px 30px #000;
    overflow:hidden;
}
#coverset{
position:absolute;
    float:left;
    margin:0;
    height:220px;
    width:960px;
    #background-color:#f00;
   
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 1500;
}


.cover {
    position:absolute;
    width:120px;
    height:175px;
    #background-color:#111;
    #margin:12px;
    #text-align:center;
    #font-size:2.5em;
    #color:red;
    #font-family: PT;
    #text-transform: uppercase;
    #border:1px solid gray;
    #box-shadow:0px 0px 30px #000;
    border-radius:10px;
    -webkit-tranform: translateZ(0);
    
    background-image:url(http://dl.dropboxusercontent.com/u/20956652/samsung/cover/0013.jpg);
}
.leftcover {
    #-webkit-transform:skew(0deg, 155deg) rotateY(60deg) translate3d(0, 0, 0);
    -webkit-transform: rotate3d(0,1,0,64deg);
}
.rightcover {
    
    #-webkit-transform:skew(0deg, 205deg) rotateY(60deg) translate3d(0, 0, 0);
    -webkit-transform: rotate3d(0,1,0,-64deg);

}
.c0 {
    left:-50px;
    z-index:10;
}
.c1 {
    left:0px;
    z-index:11;
}
.c2 {
    left:50px;
    z-index:12;
}
.c3 {
    left:100px;
    z-index:13;
}
.c4 {
    left:150px;
    z-index:14;
}
.c5 {
    left:200px;
    z-index:15;
}
.c6 {
    left:250px;
    z-index:16;
}
.c7 {
    left:300px;
    z-index:17;
}
.c17 {
    left:470px;
    z-index:26;
}
.c16 {
    left:520px;
    z-index:25;
}
.c15 {
   ...

JavaScript

var serviceurl = "http://mywidget.tv/teka/";
var cmd = "get.php";
var movlist = null;
var curpage = 1;
var lastidx = 0;
var maxpage = 1;

jQuery(document).ready(function ($) {
    $(document).on('keyup', function (event) {
        event.preventDefault();
        var keycode = event.which || event.keyCode; // Ex : 112
        //alert( keycode );
        switch (keycode) {
            case 96:
                // 0(Einfg)
                break;
            case 37:
                // left
                anmateCover(1);
                break;
            case 39:
                // right
                anmateCover(0);
                break;
            case 38:
                // up
                break;
            case 40:
                // down
                break;
            case 13:
                // enter
                break;
            default:
                break;
        }
    });

    $(".cover").each(function (idx, item) {
        $(item).text(idx);
    });

    requestPage();
});


function showMovies(){
    $(".cover:gt(7)").each(function(idx,item){
        //alert(  "'"+serviceurl+"'"movlist[lastidx].poster );
          $(item).css("background-image", "url(" +serviceurl+movlist[lastidx].poster+")");
        lastidx++;
    });
}
function requestPage() {

    $.get(serviceurl + cmd + "?page=" + curpage, function (list) {
        //alert( serviceurl + cmd + "?page=" + curpage );
        //alert(list.count);
        maxpage = parseInt(parseInt(list.total) / parseInt(list.count));
        movlist = list.rows;
        showMovies();

    }).error(function (xj, status, info) {
        alert(serviceurl + cmd + status + info);
    });
}

function anmateCover(left) {
    $(".cover").removeClass("animateCover");
    if (left) setTimeout(function () {
        setLeftTransition();
    }, 0);
    else setTimeout(function () {
        setRightTransition();
   }, 0);
}

function setRightTransition() {
    $(".cover").addClass("animateCover");
   ...