JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<nav>
  <input type="checkbox" id="menu">
  <label for="menu" class="hamburger">Menu</label>
  <menu>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
  </menu>
</nav>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, laborum atque? Illo et veniam adipisci quia delectus molestias consequuntur aliquam sequi magnam, accusantium rerum quas, soluta esse aut sint eius.</p>

CSS

input { display: none; }
nav { position: relative; z-index: 8; }
menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  display: inline-block;
  padding: 4px 12px;
  cursor: pointer;
  border-right: 1px solid silver;
}
.hamburger {
  display: none;
  padding: 6px 12px;
  border: 1px solid silver;
  border-radius: 6px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media (max-width: 420px) {
  .hamburger { display: inline-block; }
  menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    width: 120px;
    background: white;
    border: 1px solid silver;
    border-bottom: none;
  }
  input:checked ~ menu {
    display: block;
  }
  li {
    display: block;
    border-right: none;
    border-bottom: 1px solid silver;
  }
}