JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div id="left" class="hidden"><div class="wrap"></div></div>
    <div id="right" class="hidden"><div class="wrap"></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;
}


.wrap
{
    #width:100%;
    height:95%;
    margin:10px;
    overflow:hidden;
    box-shadow:inset 0 0 10px;
}


#p_first,#p_second
{
    #background:blue;
    width:99%;
    height:50%;
    
    margin:2px;    
font-size:26px; 
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   
}

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

.clogo{
    float:left;
    height:40px;
    width:40px;
    margin:5px;
    background:yellow;    
}
.cnum{
    float:left;
    height:40px;
    width:60px;
    margin:5px;
    #background:red;
    text-align:center;
    vertical-align: middle;
    line-height:40px;
}
.cname{
    float:left;
    height:40px;
    width:280px;
    margin:5px;
    #background:red;
    text-align:left;
    vertical-align: middle;
    line-height:40px;
}
.program{
    float:left;
    height:40px;
    width:430px;
    margin:5px;
    #background:red;
    text-align:left;
    vertical-align: middle;
    line-height:40px;
    overflow:hidden;
}

.cur_time{
    float:left;
    height:40px;
    width:80px;
    margin:5px;
    #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:600px;
    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...

JavaScript

$(document).ready(function(){
    $(".clogo").click(function(){
        $("#p_first,#p_second").children().toggleClass("border");
        $("#left,#right").toggleClass("hidden");
    });
});