JSFiddle - React, Tailwind, and code Playground

by newkidontheblock

HTML

<div id="wrapper">
        		<div class="top-block">
        			<ul>
        				<li><a href="#" class="proBtn">Home</a></li>
        				<li><a href="#" class="proBtn">Edit Profile</a></li>
        				<li><a href="#" class="proBtn">Like'd</a></li>
        				<li><a href="#" class="proBtn">Lists</a></li>
        				<li><a href="#" class="proBtn">Followers</a></li>
        				<li><a href="#" class="proBtn">Following</a></li>
        			</ul>
        		</div>
        	</div>

CSS

body{
        			background: #e8e8e8;
        		}

        		a{
        			text-decoration: none;
        			font-family: helvetica, sans-serif;
        			color: #6a6f75;
        			font-size: 12px;

        		}

        		.top-block{
        			width: 471px;
        		}

        		ul{
        			background: #fff;
        			margin: 0;
        			padding: 0;
        		}

        		ul li{
        			list-style: none;
        			display: inline-block;
        			min-width: 70px;
        			text-align: center;
        			word-spacing: nowrap;
        			background: #e8e8e8;
        		}

        		ul li a{
        			padding: 10px 12px;
        			display: block;
        			line-height: inherit;
        			font-weight: bold;
        		}

        		ul li a:hover, .active{
        			background: #fff;
        			color: #1d5ea8;
        		}

     			.blue{
     				color: #1d5ea8;
     			}

JavaScript

$(document).ready(function(){
        			$('.proBtn').click(function(){
        				$('li').removeClass('active');
        				$('li a').removeClass('blue');
        				$(this).parent().addClass('active');
        				$(this).parent().children('.proBtn').addClass('blue');
        			});
        		});