JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<header class="container-fluid bg-dark">
  <a href="#" class="logo">CCH</a>
  <a id="toggle-menu">
    <div id="barcontainer">
      <span class="bar bar1"></span>
      <span class="bar bar2"></span>
      <span class="bar bar3"></span>
      <span class="bar bar4"></span>
    </div>
  </a>
  <ul class="nav">
    <li><a href="#" class="hover-underline-animation">Home</a></li>
    <li><a href="#" class="hover-underline-animation">About us</a></li>
    <li><a href="#" class="hover-underline-animation">Service</a></li>
    <li><a href="#" class="hover-underline-animation">Contact</a></li>
    <li><a href="#" class="hover-underline-animation">Career</a></li>
    <li><a href="#" class="language">中文/En</a></li>
  </ul>
</header>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

CSS

body {
  background-color: #333;
}

header a {
  color: #ffffff;
  text-decoration: none;
}

header a:focus,
a:hover {
  color: #a7a7a7;
}

header a:active {
  color: #b8b8b8;
}

header {
  display: flex;
  height: 40px;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
  position: relative;
  z-index: 2;
}

.logo {
  float: left;
  cursor: pointer;
  text-decoration: none;
}

.nav {
  float: right;
}
.nav.show {
  display: block;
}

.nav>li {
  display: inline-block;
  padding-right: 20px;
  font-size: 0.9rem;
}

.nav>li:last-child {
  padding-right: 10px;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: white;
  text-decoration: none;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 1.5px;
  bottom: -3px;
  left: 0;
  background-color: #f0bc1f;
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

.hover-underline-animation:hover:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.language {
  text-decoration: none;
  color: #ffffff;
}

.header-divider {
  position: absolute;
  border-top: 1.5px solid white;
  width: 50%;
  z-index: 2;
  right: 0px;
  top: 25px;
  opacity: 0.3;
}

@media (max-width: 768px) {
  .nav {
    position: fixed;
    width: 100%;
    text-align: center;
    opacity: 0;
    background-color: #d3d3d33f;
    left: 0px;
    top: 39px;
    height: 0;
    transition: height 0.25s, opacity 0.25s;
  }
  
  #toggle-menu.menu-is-active + ul.nav {
     opacity: 1;
     height: 200px;
  }

  .nav li:hover {
    background-color: #f0bc1f;
    transition: ease-in-out;
  }

  .nav li a:hover {
    color: #000000;
  }

  .nav>li {
    display: block;
    float: center;
    padding: 8px 0px;
  }

  .nav>li:last-child {
    border-bottom: none;
  }

  .hover-underline-animation {
    display: block;
    position: relative;
    color: white;
    text-decoration: none;
  }

 ...

JavaScript

jQuery($ => {
  $('#toggle-menu').on('click', e => {
    $(e.currentTarget).toggleClass('menu-is-active')
  });
});

$(window).on('resize', () => {
	$('#toggle-menu').removeClass('menu-is-active');
});