JSFiddle - React, Tailwind, and code Playground

by GunWanderer

HTML

<script src="https://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<ul id="menu">
<li class="item"><a href="#"><i class="glyphicon glyphicon-check"></i></a></li>
	<li class="item"><a href="#"><i class="glyphicon glyphicon-plus-sign"></i></a></li>
	<li class="item"><a href="#"><i class="glyphicon glyphicon-ok-sign"></i></a></li>
	
</ul>

CSS

body {
	padding: 20px;
}
#menu {
	padding:0;
	list-style:none;
}
#menu li {
	background-color: #2D5F8B;
	float:left;
	color:#fff;
	width: 100px;
	padding: 10px;
	text-align:center;
}
#menu .item a > .glyphicon { color:#3979B2;}
#menu .item.active a > .glyphicon { color:#fff;}
a,a:hover {text-decoration:none;}
.active {
	background-color: #3979B2!important;
}

JavaScript

$(document).ready(function() {
	$("#menu .item a").click(function(){
		$("#menu .item").removeClass("active");
		if ($(this).parent().hasClass("active")) {
			$(this).parent().removeClass("active");
		}
		else {
			$(this).parent().addClass("active");
		}
	});
});