JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">





      <li>
            <a href="#contact" >Contact</a>
        </li>
        <li>
            <a href="#services" >Join Us</a>
        </li>
        <li>
            <a href="#about"  >About</a>
        </li>
        <li>
            <a href="#top" >Home</a>
        </li>

</div>

CSS

.container
{
  background:gray;
  width:200px;
}
.container li
{
  padding:5px 10px;
	color:#666666;
   background:green;
  width:100%;
  
	
	font-size:18px;
  list-style-type:none;
}
.container li a
{
  text-decoration:none;
 
  
}
.container li a:hover
{
   background:red;
  width:100%;
  display:block;
  padding:5px;
}