JSFiddle - React, Tailwind, and code Playground

by Alexander Arutuniants

HTML

<ul class="work">
    <li>Work 1</li>
    <li>Work 2</li>
    <li>Work 3</li>
</ul>
<div>And</div>
<ul class="work">
    <li>Work 3</li>
    <li>Work 4</li>
    <li>Work 5</li>
</ul>

CSS

li {
    display:block;
}
.active {
    background-color: #00ff00;
}

JavaScript

for (var item of document.querySelectorAll(".work li")) {
    item.addEventListener("click", function (evt) {
        evt.target.classList.add("active");
    }, false);
}