JSFiddle - React, Tailwind, and code Playground

by Suhaime Idris

HTML

<div id="main_nav" class="cp_fixed">
  <ul class="topnav">
    <li class="cp_current"><a href="index.php">Home</a></li>
    <li><a href="about.php">About Us</a></li>
    <li><a href="product.php">Product</a></li>
    <li><a href="contact.php">Contact</a></li>
    
    	
    
    
  </ul>
</div>

CSS

#main_nav { width: 950px; margin: 20px 20px 0 19px; line-height: 32px;}
ul.topnav { background: #656565; border-radius: .3em .3em 0 0; width: 100%; border-radius: .3em .3em 0 0; text-shadow: 0.5px 0.5px 0.5px #000; font-size: 10.5px; text-transform: uppercase;	font-weight: bold ; font-variant: normal; float: left; }
ul.topnav li { display:table; color: white; float:left;  }
ul.topnav li a { text-decoration:none; padding: 0 20px 0 20px;}
ul.topnav li a:hover { background: #900;  }
ul.topnav li a:link { display:table; padding: 0 20px 0 20px; text-decoration: none; }



ul.topnav li.cp_current { padding: 0; }
ul.topnav li.cp_current a:link { padding: 0 20px 0 20px ; line-height: 40px;}
ul.topnav li.cp_current a { height: 3.3em;  display: block; background: #fff; color: #656565; border-radius: .3em .3em 0 0; margin-top: -0.3em; cursor: default; border-left: solid #e2e2e2 1px;  box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.5); text-shadow: none; 
background: #ffffff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0NSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZTJlMmUyIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top, #ffffff 45%, #e2e2e2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(45%,#ffffff), color-stop(100%,#e2e2e2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff...

JavaScript

$(document).ready(function(){
		var str=location.href.toLowerCase();
			$(".topnav li a").each(function() {
				if (str.indexOf(this.href.toLowerCase()) > -1) {
					$("li.cp_current").removeClass("cp_current");
						$(this).parent().addClass("cp_current");
						
			}
		}); 

	}