JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<ul>
    <li>list item 1</li>    
    <li>list item 2</li>    
    <li>list item 3</li>
</ul>

CSS

ul{
    margin: 10px;
    cursor: pointer;
    font: bold 13px/1.5 helvetica;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
    color: white;
    width: 150px;
}

li{
    padding: 4px 8px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background-color: rgba(61, 102, 143, 0.9);
}

    li:hover{
        background-color: rgba(61, 102, 143, 0.8);
    }
    
    li:active{
        background-color: rgba(61, 102, 143, 1);
    }

JavaScript

var l_items = $("ul li");

function my_alert() {
    alert(this.time_value);
}

for (var i = 0, n = l_items.length; i < n; i++) {
    l_items[i].onclick = my_alert;
    l_items[i].time_value = i;
}

/* ......... VS .........

var l_items = $("ul li");

function my_alert(i) {
    return function () {
        alert(i);
    };
}

for ( var i = 0, n = l_items.length; i< n; i++){
    l_items[i].onclick = my_alert(i);
}

*/