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;
}