JSFiddle - React, Tailwind, and code Playground

by Zevan

HTML

<div id="openWin">
    <div id="fileTitle">Files:</div>
    <div id="files">
        <ul>
        </ul>
    </div>
</div>

CSS

ul{
    padding : 0;
    margin : 0;
    background-color : white;
}

li{
    list-style : none;
    font-size : 12px;
    margin: 0;
    cursor : pointer;
    background-color : white;
    font-family : Georgia, serif;
    border-bottom : 1px dotted #cccccc;
    padding : 5px 10px 5px 10px;
}

#openWin{
    position : absolute;
    top : 10px;
    left : 10px;
    width : 250px;
    height : 510px;
    background-color : #dcdcdc;
}

#files{
    position : relative;
    margin : 10px;
    background-color : white;
    width : 230px;
    height : 450px;
    overflow : auto;
}
#fileTitle{
    font-family : Georgia, serif;
    font-style : italic; 
    margin-left : 10px;
    margin-top : 10px;
}

JavaScript

var fileList = $("#openWin ul");

for (var i = 0; i < 20; i++) {
    fileList.append("<li>"+i+"<\/li>");
}

$("#openWin ul li").live('mouseover', function() {
    $(this).css({"background-color": "#ededed"});
}).live("mouseout", function() {
    $(this).css({"background-color": "white"});
});