JSFiddle - React, Tailwind, and code Playground

by Alejandro

HTML

<p>Click a list item...</p>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>
<p id="index"></p>
<p id="eq"></p>

CSS

li {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-bottom: 2px;
}
li:hover {
    cursor: pointer;
}
.red {
    background-color: rgba(255,0,0,0.5);
}
strong {
    color: #9e0b0f;
}
}

JavaScript

$('li').click( function() {
    var demo = $(this).index();
    $('li:eq(' + demo + ')').toggleClass('red');
    $('#index').html('Index of list item you just clicked is <strong>' + demo + '</strong>');
    $('#eq').html('With CSS you target this list item with <strong>li:eq(\'' + demo + '\')</strong>');
});