JSFiddle - React, Tailwind, and code Playground

by serGlazkov

HTML

<div id="navbar">
  <ul>
    <li><a href="#" class="a1"><i class="fas fa-bars"></i>Menu</a></li>
    <li><a href="#" class="a2"><i class="fas fa-shopping-cart"></i>Merchandise</a></li>
    <li><a href="#" class="a3"><i class="fas fa-info-circle"></i>About band</a></li>
    <li class="drop"><a href="#" class="a4"><i class="fas fa-music"></i>Listen now...</a></li>
  </ul>
</div>

CSS

#navbar {
  width: 100%;
  min-height: 45px;
  background: black;
  box-shadow: 2px 5px rgb(252, 227, 0, .5);
  text-align: center;
  position: fixed;
  top: 0;
  z-index: 100;
}

#navbar ul li {
  display: inline;
}

#navbar ul {
  display: block;
  margin-top: 7px;
  margin-bottom: 7px;
  color: rgb(252, 227, 0);
  font-size: 1.2rem;
}

#navbar ul li .a2,
#navbar ul li .a3,
#navbar ul li .a4 {
  display: inline-block;
  padding-left: 105px;
  cursor: pointer;
  color: rgb(252, 227, 0);
  font-size: 1.2rem;
  text-decoration: none;
  transition: .5s;
}