JSFiddle - React, Tailwind, and code Playground

by BeNdErR

HTML

<nav role='navigation' class="menu">
  <label for="menu">Menu <i class="fa fa-bars"></i></label>
  <input type="checkbox" id="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="menu-hasdropdown">
      <a href="#">About 
        <label title="toggle menu" for="about">
          <i class="fa fa-caret-down"></i>
        </label>
      </a>
      <input type="checkbox" id="about">
      <ul class="menu-dropdown">
        <li><a href="">History</a></li>
        <li><a href="">Mission</a></li>
        <li class="menu-hasdropdown menu-hasflyout">
          <a href="">Services
            <label title="toggle menu" for="services">
              <i class="fa fa-caret-down menu-downicon"></i>
              <i class="fa fa-caret-right menu-righticon"></i>
            </label>        
          </a>
          <input type="checkbox" id="services">
          <ul class="menu-dropdown">
            <li><a href="">Service 1</a></li>
            <li><a href="">Service 2</a></li>
            <li><a href="">Service 3</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

CSS

* {
  box-sizing: border-box;
}
body {
  padding: 0;
  margin: 0;
  background: #f5f5f5;
  font-family: "Rubik", sans-serif;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 991px) {
  .menu-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: block;
  }

  .list-menu {
    display: flex !important;
    justify-content: space-between;
    width: 100%;
    background: #fff;
    box-shadow: 2px 9px 49px -17px rgba(0, 0, 0, 0.3);
  }

  .item-menu {
    flex: auto;
  }
  .sub-menu {
    display: none;
    position: absolute;
  }

  .item-menu .link-menu {
    padding: 15px;
    color: #555;
    display: block;
    transition: 0.4s;
    cursor: pointer;
    text-align: center;
  }

  .item-menu .link-menu:hover {
    background: #545bc4;
    color: #fff;
  }

  .navegacao-mobile {
    display: none !important;
  }
  
  
}

.navegacao-mobile {
  background: #ccc;
  padding: 10px;
  display: block;
  width: 53px;
  cursor: pointer;
}
.linha-menu {
  width: 25px;
  height: 3px;
  border-radius: 5px;
  background: #555;
  margin: 4px;
  display: block;
}
.input-menu-all {
  display: none !important;
}
.list-menu {
  display: none;
  width: 100%;
  background: #fff;
  box-shadow: 2px 9px 49px -17px rgba(0, 0, 0, 0.3);
}

.list-menu .item-menu > .sub-menu {
  display: none;
}
.item-menu {
  flex: auto;
}
.item-menu .link-menu {
  padding: 15px;
  color: #555;
  display: block;
  transition: 0.4s;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
}
.input-menu-all:checked ~ .list-menu {
  display: block;
}
.input-menu-all:checked ~ .list-menu .link-menu {
  text-align: left;
}

.item-menu:hover > .sub-menu {
    display: block;
}