JSFiddle - React, Tailwind, and code Playground

by [Twiner]

HTML

<nav class="site-nav">
    <ul>
        <li class=""> <a href=".html"></a>

        </li>
        <li class=""> <a class="" href=".html">Maps</a>

        </li>
        <li class=""> <a class="" href=".html">Lighting</a>

        </li>
        <li class=""> <a class="" href=".html">Services</a>

        </li>
        <li class=""> <a class="" href=".html">Contact Us</a> 
        </li>
    </ul>
</nav>

CSS

article, aside, figcaption, figure, footer, header, main, nav, section {
    display: block;
}
body, dt, dd, h1, h2, h3, th, td {
    text-align: center;
    margin: 0 auto;
    
    /* padding:0; */
    width: 100%;
}
ul, ol {

}

.site-nav {
	/*width: 100%;*/
	height: 48px;	
	background: #ac0c0c; /* Old browsers */	
	background-image: -moz-linear-gradient(#bf0d0d, #860909); /* FF3.6+ */
	background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #bf0d0d), color-stop(100%, #860909)); /* Chrome,Safari4+ */
	background-image: -webkit-linear-gradient(#bf0d0d, #860909); /* Chrome10+,Safari5.1+ */
	background-image: -o-linear-gradient(#bf0d0d, #860909);/* Opera 11.10+ */
	background: -ms-linear-gradient(#bf0d0d, #860909); /* IE10+ */
	background-image: linear-gradient(#bf0d0d, #860909); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf0d0d', endColorstr='#860909',GradientType=0 ); /* IE6-8 */
	text-align: center;
  margin: 0 auto;
  display: block;
  
}

.site-nav ul {
    margin: 0 auto;
    
}

.site-nav li {
	display: inline;
  padding-top:50%;
  
	list-style-type: none;
}


.site-nav li a {
  /* padding-top:50%; */
  /* position:fixed; */
	text-align: center;
	padding-right: 40px;
	color: white;
}

.site-nav a:hover {
  
	background-color: #2d8ff0;
	color: white;
	text-shadow: none;
}