JSFiddle - React, Tailwind, and code Playground

by profesor08

HTML

<nav>
  <button>==</button>
  <ul>
    <li><a href="#">menu item 1</a></li>
    <li><a href="#">menu item 2</a></li>
    <li><a href="#">menu item 3</a></li>
    <li><a href="#">menu item 4</a></li>
  </ul>
</nav>

SCSS

nav {
  display: flex;
  background: #f5f5f5;
  border-bottom: 1px solid #e2e2e2;
  
  button {
    padding: 10px;
    border: 0;
  }
  
  ul {
    list-style: none;
    margin-left: auto;
    display: flex;

    li a {
      padding: 10px;
      display: inline-block;

      &:hover {
        background: #e2e2e2;
      }
    }
  }
}

@media screen and (min-width: 768px) {
  nav {
    button {
      display: none;
    }
  }
}

@media screen and (max-width: 767.98px) {
  nav {
    position: relative;
    
    button:not(:hover) {
      ~ ul {
        display: none;
      }
    }
    
    ul {
      position: absolute;
      top: 100%;
      left: 0;
      flex-direction: column;
      background: #f5f5f5;
      border: 1px solid #e2e2e2;
    }
  }
  
}