JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<div class="bar-menu">
  <nav>
    <ul>
      <li class="active"><a href="#"><i class="fas fa-home"></i>Home</a></li>
      <li><a href="#"><i class="fas fa-user"></i>About Us</a></li>
      <li><a href="#"><i class="fas fa-clone"></i>Services</a></li>
      <li><a href="#"><i class="fas fa-users"></i>Clients</a></li>
      <li><a href="#"><i class="fas fa-tags"></i>Prix</a></li>
      <li><a href="#"><i class="fas fa-edit"></i>Design</a></li>
      <li><a href="#"><i class="fas fa-phone"></i>Contact</a></li>
    </ul>
  </nav>
</div>
<hr/>
<div class="bar-menu">
    <nav>
        <ul>
      <li class="active"><a href="#"><i class="fas fa-home"></i>Home</a></li>
      <li><a href="#"><i class="fas fa-user"></i>About Us</a></i></li>
      <li><a href="#"><i class="fas fa-clone"></i>Services</a></li>
      <li><a href="#"><i class="fas fa-users"></i>Clients</a></li>
      <li><a href="#"><i class="fas fa-tags"></i>Prix</a></li>
      <li><a href="#"><i class="fas fa-edit"></i>Design</a></li>
      <li><a href="#"><i class="fas fa-phone"></i>Contact</a></li>
    </ul>
    </div>
    </nav>