JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menuHolder" id="menu">
  <div class="menu">
    <span id="menuBtnOn" onclick="menuOut()">&#x2190;</span>
    <ul id="items">
      <li> <span id="menuBtnOff" onclick="menuIn()">&#x2573;</span></li>
      <li> <a href="#about" rel=""> About Me </a> </li>
      <li> <a href="#profile" rel=""> What I can do for you </a> </li>
      <li> <a href="#footer" rel=""> Contact </a> </li>
    </ul>
  </div>
</div>

SCSS

$menuGreen: green;
a:link,a:visited {
  text-decoration: none;
  color: black;
}

.menu {
  white-space: nowrap;
  overflow: hidden;
}

.menuHolder {
  overflow: hidden;
  position: fixed;
  display: inline-block;
  top: 0;
  right: 0;
  width: 110%;
  padding: 6px 0 0;
  background-color: rgba(70, 106, 135, 0.65);
  text-align: right;
  transition: all 1s ease-in-out;
  max-height: 37px;
  z-index: 10;
  ul {
    margin: 0;
    padding: 0;
  }
  li:hover {
    a {
      cursor: pointer;
      color: $menuGreen;
      transition: all 0.1s ease-in-out;
    }
  }
  li, #menuBtnOn {
    transition: all 0.1s ease;
    text-indent: initial;
    resize: none;
    float: right;
    display: inline-block;
    padding: 15px;
    line-height: 5px;
    font-family: "Roboto", sans-serif;
    font-weight: lighter;
    font-size: 14px;
    color: black;
    &:not(:first-child) {
      border-right: 1px solid rgba(37, 37, 37, 0.28);
    }
    a:after {
      display: block;
      content: "";
      border-bottom: solid 3px $menuGreen;
      transform: scaleX(0);
      transition: transform 250ms ease-in-out;
      margin-top: 10px;
    }
    &:hover a:after {
      transform: scaleX(1);
    }
  }
  #menuBtnOff, #menuBtnOn {
    transition: all 0.3s ease;
    cursor: pointer;
    color: black;
    &:hover {
      color: $menuGreen;
    }
  }
  #menuBtnOn {
    font-size: 20px;
    float: left;
  }
}