JSFiddle - React, Tailwind, and code Playground

by Reusablecode

HTML

<head>
    <title>NudgeEditDelete List</title>
</head>
<body>
<ul>
    <li><span>Jimmy Rockysocks</span></li>
    <li><span>Suzy Sandstorm</span></li>
    <li><span>Jennifer Gumbo</span></li>
    <li><span>Richard Metalmorph</span></li>
    <li><span>Sarah Cope</span></li>
</ul>

CSS

* {
    padding:0;
    margin:0;
}

ul {
    border: 2px solid #ddd;
    margin: 0px auto;
    width: 300px;
}

li {
    cursor: pointer;
    font:bold 12px "Lucida Grande",Arial,Sans-Serif;
    padding:20px 10px 20px 20px;
    position:relative;
}

li.current, li:hover {
    background-color: #ddd !important;
}

li:nth-child(2n+1) {
    background:none repeat scroll 0 0 whiteSmoke;
}

li.current span { text-decoration: underline; }

li div {
    display: inline;
    float: right;
    position: relative;
    top: -5px;
}

li div img {
    margin-left: 10px;
}

JavaScript

// http://p.yusukekamiyamane.com/icons/search/fugue/
var images = {
    edit: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAf1JREFUeNpi/P//PwMtASOpGvQ1GRnigkA0hH/2phbDmRtaDB7XroFwGFAo9A8DA9MJBoamsH//LrKQazAW4AsyXGrGjBCGe/cYdnR2ygH5pixUMBgETHZoaUkmXbkScs/VlUHJ2JjhDzR0WCg0GARsgVhz1apVM9+/f89wr7ycYYer61mg2CyscUCCwQzA9BH58ydDtHdQu/fqPUoMgoKCDIGBgR2pX79eV/n/f1EWUAHLniWMZKUOZMPfv7/HYKx0lkHfYXvHjx8/9t9hZNylAk2dTNQwHBQ0G1atPiQh9P0YUHoXslomahn+/QfDQnmp/5vR1TNRy/B//xjmYdPDREvDibaAXMOJsoASwwlaQKnheC2ghuE4iwpSDX/wlIHhPhA/fPaf4R9QwS2gAf+A4lnYLCDF8P2nIBhJNxjfBJI3sfmAWMMxDcYTRB9fwWseIzY+hmgrx1ychpNiMNyC4yf/M6jIgF3vkVFzxnvPnk4GJSUGFMPJMRhuwcajDAxpfozOFg5pPh8+PAca7gI0PB1s+N4TEMMpBcwFoYzr39/b/H9Rr+/VdD/G1db6jB5AcVZoHMEwMxQzQTEjEsaR1P+DJUWB+FW8B+PBq/cZ1p+5+X8bNDn8BeJ/UBqE/yCxkfE/JIzVAj4gZoe6khGe1lA1EsIwPRgWAAQYAAXOr6OBl77vAAAAAElFTkSuQmCC',
    del:...