JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="ma-navbar-ul ng-scope">
   <li class="ma-navbar-li">
      <center>
         <div>
            <a href="#" class="ma-navbar-a"><img src="https://cdn1.iconfinder.com/data/icons/MetroStation-PNG/128/MB__save.png" class="ma-navbar-img"><br>  home</a>
         </div>
      </center>
   </li>
   <li class="ma-navbar-li">
      <center><a href="#" class="ma-navbar-a"><img src="https://cdn1.iconfinder.com/data/icons/MetroStation-PNG/128/MB__save.png" class="ma-navbar-img"><br>  modes Home</a></center>
   </li>
   <li class="ma-navbar-li">
      <center><a href="#" class="ma-navbar-a"><img src="https://cdn1.iconfinder.com/data/icons/MetroStation-PNG/128/MB__save.png" class="ma-navbar-img"><br>  rooms</a></center>
   </li>
   <li class="ma-navbar-li">
      <center><a href="#" class="ma-navbar-a"><img src="https://cdn1.iconfinder.com/data/icons/MetroStation-PNG/128/MB__save.png" class="ma-navbar-img"><br>  activities</a></center>
   </li>
   <li class="ma-navbar-li">
      <center><a href="#" class="ma-navbar-a"><img src="https://cdn1.iconfinder.com/data/icons/MetroStation-PNG/128/MB__save.png" class="ma-navbar-img"><br>  device assistant</a></center>
   </li>
   <li class="ma-navbar-li">
      <center><a href="#" class="ma-navbar-a"><img src="https://cdn1.iconfinder.com/data/icons/MetroStation-PNG/128/MB__save.png" class="ma-navbar-img"><br>  users</a></center>
   </li>
</ul>

CSS

@font-face {
    font-family: din-regular; /* Гарнитура шрифта */
    src: url(../../fonts/din-regular.ttf); /* Путь к файлу со шрифтом */
}

.ma-navbar-ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.6);
    font-family: din-regular;
    font-size: 14px;
}

.ma-navbar-li {
    float: left;
    width: 16.6%;
}

.ma-navbar-a {
    display: inline-block;
    color: rgb(129, 128, 128);
    text-align: center;
    padding: 15px 15px;
    text-decoration: none;
    margin: 10px 0px;
    border: 1px solid rgba(0, 0, 0, 0);  /* to not blink on hover*/
}

.ma-navbar-a:hover {
    color: rgb(255, 255, 255);
    text-decoration: none;
    border: 1px solid rgb(83, 109, 140);
}

.ma-navbar-a:hover img{
    opacity: 1;
}

.ma-navbar-img {
    width: 30%;
    opacity: 0.4;
}