JSFiddle - React, Tailwind, and code Playground

by exe1

HTML

<div id="main">
    <div id="mainlist">
        <ul id='list'></ul>
    </div>
    <div id="maininfo">
        <ul id='list'></ul>
    </div>
</div>

CSS

img{
    float:left;
    border-radius:5px;
    background-color:#554455;
    width:40px;
    height:30px;
    box-shadow:0px 0px 10px #000;
}
.id{
    width : 50px;
    float:left;
}
#list{
    padding-left:20px;
}
#main{
    position:fixed;
    margin:0;
    padding:0;
    height:540px;
    width:960px;
    border: 0px solid red;
    background-color:#000;
}
#mainlist{
    top:34px;
    height:472px;
    left: 20px;
    width:450px;
    position:absolute;
    overflow:hidden;
    border: 1px solid black;
    box-shadow:0px 0px 10px #000;
    background-color:#333;
}
#maininfo{
    top:34px;
    left:490px;
    height:472px;
    width:450px;
    position:absolute;
    overflow:hidden;
    border: 1px solid black;
    box-shadow:0px 0px 10px #000;
    background-color:#333;
}
.name{
    padding:5px;
    width : 100px;
    float:left;
    overflow:hidden;
    white-space: nowrap;
	text-overflow: ellipsis;
    box-shadow:0px 0px 10px #000;
}

.ukraina{
    color:#FF9999;
    background-color: black;
}

li{
    height:30px;
    box-shadow:0px 0px 10px #000;
    margin:6px;
    padding:0px;
    width: 90%;
    border-radius:5px;
    background-color:#555;
    color:#999;
    border:1px solid black;
}

JavaScript

var ukraina = [ 18, 20, 30, 17, 90, 101, 15, 62, 21, 19, 112, 106, 105, 55, 103, 104, 108, 84, 262, 263, 172, 173, 174, 486, 63, 32 ];


var chlist = [];
$(function() {
    $.getJSON("https://dl.dropbox.com/u/20956652/samsung/tmp/channellist.txt", function(data){
        chlist = data.channels;
        for( idx in data.channels ){
            var item = data.channels[idx];
            addToList( item );
        };
         $("li").hover(
              function () {
                  $(this).css({"box-shadow":"0px 0px 22px #c55311","color":"white" });
              },
              function () {
                  $(this).css({"box-shadow":"0px 0px 12px #000","color":"#999"});
              }
            );        
    });

    
   });



function addToList( item )
{
    var element = $("<li>");
    if( 0 <= ukraina.indexOf( item.id ) )
        element.addClass('ukraina');
    element.append("<img src='" + "http://rtv.eu01.aws.af.cm/logos/types/white/40X30/" + item.id + ".png' />");
    //element.append("<div class='id'>id: "+item.id.toString() +"</div>");
    element.append("<div class='name'>" + item.name.toString() + "</div>");

    $("#list").append(element);
       
}