JSFiddle - React, Tailwind, and code Playground

by Xenel

HTML

<nav>
  <div id="Maindiv">
    <div id="navdiv">
       <div id="container">
          <a href="../index.html"><img src="../img/menu-logo.png" alt="Menu Logo"></a>
          <ul>
            <li>
              <a href="../blog/index.html">Item 5</a>
              <span class="slider"></span>
            </li>
            <li>
              <a href="../contactos/index.html">Item 4</a>
              <span class="slider"></span>
            </li>
            <li>
              <a href="../serviços/index.html">Item 3</a>
              <span class="slider"></span> 
            </li>
            <li>
              <a href="../quem_somos/index.html">Item 2</a>
              <span class="slider"></span>
            </li>
            <li id="highlight">
              <a href="../home/index.html">Item 1</a>
              <span class="slider"></span>
            </li>
      </ul>
      </div>
    </div>
  </div>
</nav>

CSS

*{
	padding: 0px;
	margin: 0px;
}

.slider {
  position: absolute;
  display:block;
  left: 0;
  top: 90%;
  margin: 0 auto;
  height: 2px;
  width: 0%;
  border-bottom: 5px solid #FF9933;
  transition: width 1s ease;
}

#navdiv {
  background: #333;
}

#navdiv ul {
	width: 100%;
  display: inline;
}

#container {
	margin-left: 200px;
	margin-right: 200px;
  height: 63px;
  line-height: 63px;
}

#navdiv ul a {
	text-decoration: none;
	color: #f2f2f2;
	font-size: 16px;
}

#navdiv ul li {
	list-style-type: none;
	float: right;
	position:relative;
  display:inline;
  background-color: red;
  line-height: 29px;
  margin-top: 16px;
  margin-right: 10px;
}

#navdiv ul li:hover .slider {
	border-bottom: 5px solid #FF9933;
	transition: all 0.3s ease-in-out;
	width: 100%;
}

#highlight {
	display: inline-block;
	line-height: 1em;
	padding: 0;
	border-bottom: 5px solid #FF9933;
}

#navdiv img {
	width: auto;
	max-width: 100%;
}