JSFiddle - React, Tailwind, and code Playground

by webdevem

HTML

<section>
<div id="navWrapper">
  <div id="menuToggle">
    MENU
  </div>
  <ul id="topNav">
    <li>Level 1</li>
    <li>Level 1
      <ul>
        <li>Level 2</li>
        <li>Level 2</li>
      </ul>
    </li>
  </ul>
</div>
</section>

CSS

section
{
  background-color: #fff;
}
#navWrapper {
  background-color: tan;
  color: #000;
  position: absolute;
  top: 0;
  left: 0;
  width: 95%;
  transition: all .2s linear;
}

@media screen and (min-width: 480px) {
  #navWrapper {
    background-color: black;
        color: #fff;
        min-height: 95vh;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
  }
}

#topNav
{
  margin: 0 auto;
  display: block;
}
#menuToggle
{
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}