JSFiddle - React, Tailwind, and code Playground

by Afzaal Ahmad Zeeshan

HTML

<ul>
    <li>Matches</li>
    <li>Matches</li>
    <li>Matches</li>
    <li>Matches</li>
</ul>

CSS

ul {
    list-style: none;
    cursor: pointer;
    background-color: #F3F3ED;
}

ul li {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid transparent;
}

li.active {
    background-color: #cecece;
    border-right: 1px solid #fff;
    border-left: 1px solid #fff;
}

JavaScript

$('ul li').click(function () {
    $('ul li').attr('class', '');
    $(this).attr('class', 'active');
});