JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
    <div id="left"><div class="wrap"></div></div>
    <div id="right"><div class="wrap_r"></div></div>
    <div id="player">
        <div id="p_first">
            <div class="clogo"></div>
            <div class="cnum">999</div>
            <div class="cname">Первый Канал HD</div>
            <div class="program">Вечерний Ургант</div>
            <div class="cur_time">19:03</div>
        </div>
        <div id="p_second">
            <div class="play_type">Live 18:50-19:30</div>
            <div class="progress_wrp"><div class="progress"></div></div>
            <div class="play_percent">48%</div>
        </div>            
    </div>
</div>

CSS

#main
{
    background:url("http://dl.dropboxusercontent.com/u/20956652/samsung/lvtv/bg.jpg");
    background-size:cover;
    width:960px;
    height:540px;
    position:fixed;
    top:0;
    left:0;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
}




#p_first,#p_second
{
    #background:blue;
    width:99%;
    height:50%;    
    font-size:26px; 
   
}

.border
{
    border:none;
    border:solid 1px #fff;
}
.hidden
{
    display:none;
}

.clogo{
    float:left;
    height:38px;
    width:38px;
    background:yellow;    
}
.cnum{
    float:left;
    height:40px;
    width:60px;
    #background:red;
    text-align:center;
    vertical-align: middle;
    line-height:40px;
}
.ch_num{
    float:left;
    height:38px;
    width:38px;
    #background:red;
    text-align:center;
    vertical-align: middle;
    line-height:38px;
}
.cname{
    float:left;
    height:40px;
    width:280px;
    #background:red;
    text-align:left;
    vertical-align: middle;
    line-height:40px;
    color:#CBE531;
}
.program{
    float:left;
    height:40px;
    width:470px;

    #background:red;
    text-align:left;
    vertical-align: middle;
    line-height:40px;
    overflow:hidden;
}

.cur_time{
    float:right;
    height:40px;
    width:80px;
    #background:green;
    text-align:left;
    vertical-align: middle;
    line-height:40px;
    overflow:hidden;
}

.play_type{
    float:left;
    height:36px;
    width:220px;
    margin:5px;
    #background:green;
    text-align:left;
    vertical-align: middle;
    line-height:36px;
    overflow:hidden;
}

.progress_wrp{
    float:left;
    height:12px;
    width:590px;
    margin:16px;
    background:#777;
    text-align:left;

    box-shadow:inset 0px 1px 1px #000;
    overflow:hidden;
}
.progress{
    height:9px;
    width:400px;
    margin-top:2px;
    background:#BBB;
    overflow:hidden;
    box-shadow:1px 0px 5px #444;
}


.play_percent{
   ...

JavaScript

// 007FD4
$(document).ready(function(){
    $(".clogo").click(function(){
        $("#p_first,#p_second").children().toggleClass("border");
        $("#left,#right").toggleClass("hidden");
    });
    var channel = '<div class="channel"><div class="ch_num">999</div><div class="clogo"></div><div class="ch_name">Первый Канал HD</div></div>';
    $(".wrap")
        .append(channel)
        .append(channel)
        .append(channel)
        .append(channel)
        .append(channel)
        .append(channel)
        .append(channel)
        .append(channel)
        .append(channel)
    ;
    $(".channel").eq(5).toggleClass("selected");
});