JSFiddle - React, Tailwind, and code Playground

by Yuli Satriani

HTML

<nav class='navmenu'>
  <ul>
  <li><a href="#"><b><i class="fa fa-home" aria-hidden="true"></i>&nbsp; Home</b></a></li>
  <li><a href="#"><b><i class="fa fa-sitemap" aria-hidden="true"></i>&nbsp;Networking</b></a></li>
  <li><a href="#"><b><i class="fa fa-windows" aria-hidden="true"></i>&nbsp;Windows</b></a></li>
  <li><a href="#"><b><i class="fa fa-android" aria-hidden="true"></i>&nbsp;Android</b></a></li>
  <li><a href="#"><b><i class="fa fa-linux" aria-hidden="true"></i>&nbsp;Linux</b></a></li>
  </ul>
</nav>

CSS

.navmenu {
  width: 100%;
  margin: 0px auto;
  display: block;
  position: relative;
  background-color: #1C90F3;
}

nav.navmenu ul {
  list-style: none;
  position: relative;
  width: 80%;
  box-sizing: border-box;
  background: #1C90F3;
  margin: 0px auto;
  padding: 0px;
}

nav.navmenu li {
  display: inline-block;
  position: relative
}

nav.navmenu li a {
  padding: 10px 15px;
  text-decoration: none;
  color: #FFF;
  display: block;
  box-sizing: border-box;
}

nav.navmenu li a:hover {
  background-color: #1789EA
}