JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<ul>
    <li id="button1"> Option 1  </li>
    <li id="button2"> Option 2  </li>
    <li id="button3"> Option 3  </li>
    <li id="button4"> Option 4  </li>
</ul>

CSS

ul{
    background-color:#668fcc;
    padding:0px;
    max-width:150px;
}

li{
    list-style:none;
    text-align:center;
    height:50px;
    line-height:50px;
    color:#FFF;
}

li:hover{
    cursor:pointer;
}

JavaScript

$( document ).ready(function() {
    $( "#button1" ).click(function() {
        $('li').css('color', '#FFF');
        $('li').css('background-color', '#668fcc');
        $( "#button1" ).css('background-color', '#e3eeff');
        $( "#button1" ).css('color', '#668fcc');
    });
     $( "#button2" ).click(function() {
          $('li').css('color', '#FFF');
          $('li').css('background-color', '#668fcc');
          $( "#button2" ).css('background-color', '#e3eeff');
          $( "#button2" ).css('color', '#668fcc'); 
    });
     $( "#button3" ).click(function() {
         $('li').css('color', '#FFF');
          $('li').css('background-color', '#668fcc');
        $( "#button3" ).css('background-color', '#e3eeff');
         $( "#button3" ).css('color', '#668fcc');
    });
        $( "#button4" ).click(function() {
        $('li').css('color', '#FFF');
        $('li').css('background-color', '#668fcc');
        $( "#button4" ).css('background-color', '#e3eeff');
        $( "#button4" ).css('color', '#668fcc');
    });
});