JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

CSS

body { font-family: Arial; font-size: 14px; color: #212121; }

ul { cursor: pointer; width: 100px; }
ul li { padding: 5px; border: 1px solid #e1e1e1; }

.active { background: #444; color: #fff; }

JavaScript

$( "li" ).click( function() {
    if( $(this).is('.active') ) {
        $(this).removeClass( "active" );
    }
    else {
        $( "li.active" ).removeClass( "active" );
        $(this).addClass( "active" );
    }
});