JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
    <div class="onhiddentop">
        <div class="left"></div>
        <div class="mid"></div>
        <div class="right"></div>
    </div>
    <div class="ontop">
        <div class="left"></div>
        <div class="mid"></div>
        <div class="right"></div>
    </div>
    <div class="onmid">
        <div class="left"></div>
        <div class="mid"></div>
        <div class="right"></div>
    </div>
    <div class="onbottom">
        <div class="left"></div>
        <div class="mid"></div>
        <div class="right"></div>
    </div>
    <div id="bottom"></div>
</div>

CSS

#main {
    #background:url("http://dl.dropboxusercontent.com/u/20956652/samsung/kartina/api/rio.jpg");
    background-size:cover;
    background:gray;
    width:960px;
    height:540px;
    position:fixed;
    top:0;
    left:0;
    -webkit-transition: all 1s;
    /* Safari */
}
.left, .mid, .right {
    position:relative;
    width:280px;
    height:60px;
    float:left;
    background:blue;
    display:inline-block;
    margin-right:6px;
    text-align:center;
    -webkit-transition: all 1s;
    /* Safari */
}
.onmid > .left, .onmid > .right {
    margin-top:8px;
    width:260px;
}

.onmid > .mid {
     width:320px;
    height:80px;
    background:red;
}
.ontop, .onmid, .onbottom, .onhiddentop {
    width:860px;
    height:60px;
    position:fixed;
    top:50px;
    left:0px;
    #background-color:rgba(0, 0, 0, 0.5);
    margin:40px;
    overflow:hidden;
    padding:15px;
    #box-shadow:inset 0 0 10px;
    -webkit-transition: all 500ms ease-out;
    /* Safari */
}
.stop
{
    transition-duration: 0s;
    -webkit-transition-duration:0s;
}
.ontop {
    opacity:1;
}
.onmid {
    top:150px;
    opacity:1;
}
.onhiddentop {
    top:-50px;
    opacity:0;
}
.onbottom {
    top:250px;
    opacity:0;
}
#bottom {
    width:840px;
    height:180px;
    position:fixed;
    top:270px;
    left:0px;
    background-color:rgba(0, 255, 0, 0.5);
    margin:50px;
    overflow:hidden;
    padding:10px;
    #box-shadow:inset 0 0 10px;
}
.channel {
    width:98%;
    margin:3px;
    padding:2px;
    height: 37px;
    font-size: 2em;
    color:#FFF;
    text-shadow:0 0 3px #000;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height: 1.5;
    vertical-align: middle;
}

JavaScript

var TopLine = {
    me: null,
    init: function (items) {
        TopLine.me = $("#top");
        $(items).each(function (idx, item) {
            TopLine.me.append();
        });

    },
    moveUp: function () {
        var $hiddentop = $(".onhiddentop");
        
        $(".ontop").removeClass("ontop").addClass("onhiddentop");
        $(".onmid").removeClass("onmid").addClass("ontop");
        $(".onbottom").removeClass("onbottom").addClass("onmid");
         $hiddentop.removeClass("onhiddentop").addClass("onbottom");
    },
    moveDown: function () {
        //element.style.webkitAnimationPlayState = "paused";
       // element.style.webkitAnimationPlayState = "running";

        var $top = $(".ontop");
        var $hiddentop = $(".onhiddentop");
        var $mid = $(".onmid");
        var $bottom = $(".onbottom");
        
        $bottom.removeClass("onbottom").addClass("onhiddentop");
        $mid.removeClass("onmid").addClass("onbottom");
        $top.removeClass("ontop").addClass("onmid");
        $hiddentop.removeClass("onhiddentop").addClass("ontop");
    }
};

var MidLine = {
    init: function () {}
};

var BottomLine = {
    init: function () {}
};







function onDown() {
    TopLine.moveDown();
}

function onUp() {
    TopLine.moveUp();
}

function onLeft() {

}

function onRight() {

}

function onEnter() {}













$(document).ready(function () {

    $(document).keyup(function () {
        event.preventDefault();
        //alert(event.which);
        switch (event.which) {
            case 37:
                // left
                onLeft();
                break;
            case 39:
                // right
                onRight();
                break;
            case 38:
                // up
                onUp();
                break;
            case 40:
                // down
                onDown();
                break;
            case 13:
                // enter
                onEnter();
                break;
...