JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div class="box">
<ul>
	<li class="one"><a href="#">one</a></li>
        <li class="two"><a href="#">two</a></li>
        <li class="three"><a href="#">three</a></li>
       <li class="four"><a href="#">four</a></li>
       <li class="five"><a href="#">five</a></li>
</ul>
</div>

CSS

.bg1 { background:#6c0000;padding: 3px;}
.bg2 { background:#5A2A00;padding: 3px;}
.bg3 { background:#00345B;padding: 3px;}
.bg4 { background: yellow;padding: 3px;}
.bg5 { background: green;padding: 3px;}
.box { width:100px; height:100px;background:#111;color:#fff;
}

JavaScript

$(document).ready(function(){ 

        $("li.one").click( function(){ $
		("body").removeClass('bg2 , bg3, bg4, bg5').addClass("bg1");
	});

	$("li.two").click( function(){ $
		("body").removeClass("bg1 , bg3,  bg4, bg5").addClass("bg2");
	});

	$("li.three").click( function(){ $
		("body").removeClass("bg1 , bg2,  bg4, bg5").addClass("bg3");
	}); 
    
    $("li.four").click( function(){ $
		("body").removeClass("bg1 , bg2,  bg3, bg5").addClass("bg4");
	}); 
    
    $("li.five").click( function(){ $
		("body").removeClass("bg1 , bg2,  bg3, bg4").addClass("bg5");
	}); 

});