JSFiddle - React, Tailwind, and code Playground

by AshThakur

HTML

<br/>
<br/>
<br/>
<br/>

<ul class="hor-nav">
<li><a href="#">Home</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Privacy</a></li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://lordhtml.blogspot.com/" target="_blank"><img border="0" src="http://1.bp.blogspot.com/-7uq5w9CIyas/T7H7g4P-6pI/AAAAAAAABvg/oFZCm1bPIz8/s1600/cooltext697757115.png" /></a></div>
<br /></div>

CSS

.hor-nav li {
list-style: none; float:center;}
.hor-nav li {
float: left;
padding-top:10px; padding-bottom:20px;}
.hor-nav li a {
font-family: 'Righteous', cursive;
font-size:17px;
text-decoration:none;
float:center;
position: relative;
display: block;
padding: 14px 25px;
border-bottom: 8px solid #ccc;
background: #f4f4f4; color: #999;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out; }
.hor-nav li a:hover {
text-decoration:none;
color: #000; background: #fff;
border-color: #000;
padding: 25px; top: -14px; }
.hor-nav li .active a, .nav li .active a:hover {
background: #444; color: #fff;
border-color: #000; }

JavaScript

WebFontConfig = {
    google: { families: [ 'Righteous::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();