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>

CSS

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
      content: ''
      border-bottom: solid 3px $menuGreen
      transform: scaleX(0)
      transition: transform 250ms ease-in-out
      a:hover:after
        transform: scaleX(1)

  #menuBtnOff, #menuBtnOn
    transition: all 0.3s ease
    cursor: pointer
    color: black
    &:hover
       color: $menuGreen

  #menuBtnOn
     font-size: 20px
     float: left