JSFiddle - React, Tailwind, and code Playground

by jimmysv

HTML

<ul>
    <li data-itemid="1">1</li>
    <li data-itemid="2">2</li>
    <li data-itemid="3">3</li>
</ul>

CSS

li { 
    cursor:pointer; 

    border:1px solid gray;
    margin-bottom:10px;
    padding:10px;

    -moz-border-radius: 12px; 
    -webkit-border-radius: 12px; 
    border-radius: 12px;

    background-color: #444444;
    background-image: -moz-linear-gradient(top, #444444, #999999); 
    background-image: -o-linear-gradient(top, #444444, #999999); 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); 
    background-image: -webkit-linear-gradient(#444444, #999999); 
    background-image: linear-gradient(top, #444444, #999999);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999');
}

JavaScript

$('ul').delegate('li', 'click', function(){
        window.open('http://www.sigma.se?itemid=' + $(this).data('itemid'));
});