JSFiddle - React, Tailwind, and code Playground

HTML

<!-- SECTION: NAVIGATION BAR -->
<div class="navigation-bar">
  <div class="navigation-item">
    <div class="logo">
      <a href="index.html">
        <img src="/assets/img/logo.jpg" alt="Company Logo">
      </a>
    </div>
    <ul class="navigation-bar-menu">
      <li class="active"><a href="index.html" class="active">Home</a></li>
      <li><a href="#">Services <i class="fa-thin fa-chevron-down"></i></a>

        <ul class="navigation-bar-dropdown">
          <li><a href="#">Managed Print Service</a></li>
          <li><a href="#">Document Management</a></li>
          <li><a href="#">Machine Finance Options</a></li>
          <li><a href="#">Machine Repair & Support</a></li>
        </ul>

      </li>
      <li><a href="#">Products <i class="fa-thin fa-chevron-down"></i></a>
        <ul class="navigation-bar-dropdown">
          <li><a href="#">Machines</a></li>
          <li><a href="#">Ricoh</a></li>
          <li><a href="#">Lexmark</a></li>
          <li><a href="#">Konica Minolta</a></li>
          <li><a href="#">Software</a></li>
          <li><a href="#">Kofax</a></li>
          <li><a href="#">Papercut</a></li>
          <li><a href="#">Filestar</a></li>

        </ul>
      </li>
      <li><a href="contact.html">Contact Us</a></li>
    </ul>
    <button class="navigation-bar-toggle">
      <i class="fa-light fa-bars"></i>
      Menu
    </button>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: #242424;
  font-family: 'proxima-nova', sans-serif;
  font-weight: 100;
  font-style: normal;
  font-size: 16px;
  line-height: 1.5rem;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.navigation-bar {
  background-color: #ffffff;
  padding: 2rem 1rem;
  position: relative;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.navigation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  width: 10rem;
  display: block;
}

.navigation-bar-toggle {
  padding: 1rem;
  background-color: #ecf0f1;
  color: inherit;
  cursor: pointer;
  text-transform: uppercase;
  border: none;
  font: inherit;
  border-radius: 0.25rem;
}

.navigation-bar-dropdown {
  display: flex;
  flex-direction: column;
}

.navigation-bar-menu {
  flex-direction: column;
  right: 0;
  overflow: hidden;
  top: 100%;
  background: #ecf0f1;
  display: none;
  position: absolute;
  width: 100%;
}

.navigation-bar-menu .active {
  background-color: #242424;
  color: #ffffff;
  font-weight: 300;
}

.navigation-bar-menu li {
  display: flex;
  justify-content: center;
  padding: 1rem;
}

.navigation-bar-menu a {
  text-transform: uppercase;
}

.navigation-bar a:hover {
  opacity: 1 !important;
}

.navigation-bar-menu :not(.active):hover {
  background-color: #242424;
  color: #ffffff;
  opacity: 1;
  animation-name: fadeInOpacity;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 500ms;
}


.navigation-bar-menu.open {
  display: flex;
}

@media only screen and (min-width: 700px) {
 /* NAVIGATION BAR */
 .navigation-bar-toggle {
   display: none;
  }
  
  .navigation-bar-menu {
    display: flex;
    flex-direction: row;
    position: relative;
    background: none;
    justify-content: end;
    width: auto;
    gap: 1rem;
  }

  .navigation-bar-menu...

JavaScript

window.addEventListener('DOMContentLoaded', () => {
  const menuToggler = document.querySelector('.navigation-bar-toggle')
  const menu = document.querySelector('.navigation-bar-menu')

  menuToggler.addEventListener('click', () => {
    menu.classList.toggle('open')
  })
})