JSFiddle - React, Tailwind, and code Playground

by rpflorence

HTML

<ul id="foo">
    <li class="other">Beef Jerky</li>
    <li>Smoked Salmon</li>
    <li class="other">Rocky Mountain Oysters</li>
    <li class="other">Beef Jerky</li>
    <li>Smoked Salmon</li>
    <li class="other">Rocky Mountain Oysters</li>
</ul>

CSS

body {
    font-family: helvetica, arial;
}

ul#foo li {
    background: #f0f0f0;
    border: solid 1px #ccc;
    padding: 0.5em 1em;
    cursor: pointer;
}

h1 {
    margin-top: 10px;
    background: #000;
    color: #fff;
    font-family: monospace;
    padding: 1em
}

h1 + h1 {
    margin-top: 0;
}

JavaScript

$('li').html(function(i){
    return 'my index is - ' + i;
});