JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <header id="header" itemscope="" itemtype="http://schema.org/ ">
    <div class="inside">
      <a href="https://demo.contao.org/" class="logo">
        <img src="https://demo.contao.org/files/contaodemo/theme/img/logo.png" alt="Contao Demo">
      </a>
      <nav class="mod_navigation nav-main hideat768 dropdown block" id="nav-main" itemscope="" itemtype="http://schema.org/SiteNavigationElement">
        <ul class="level_1">
          <li class="start sibling first"><a href="#" title="Welcome to the official Contao Demo Site" class="start sibling first" accesskey="1" itemprop="url"><span itemprop="name">Home</span></a>
          </li>
          <li class="active submenu"><strong class="active submenu" aria-haspopup="true" itemprop="name">Content Elements</strong>
            <ul class="level_2">
              <li class="noprevlink first"><a href="#" title="Text elements" class="noprevlink first" itemprop="url"><span itemprop="name">Text elements</span></a>
              </li>
              <li><a href="#" title="Accordion" itemprop="url"><span itemprop="name">Accordion</span></a>
              </li>
              <li><a href="#" title="Content slider" itemprop="url"><span itemprop="name">Content slider</span></a>
              </li>
              <li><a href="#" title="Link elements" itemprop="url"><span itemprop="name">Link elements</span></a>
              </li>
              <li><a href="#" title="Media elements" itemprop="url"><span itemprop="name">Media elements</span></a>
              </li>
              <li><a href="#" title="File elements" itemprop="url"><span itemprop="name">File elements</span></a>
              </li>
              <li class="last"><a href="#" title="Include elements" class="last" itemprop="url"><span itemprop="name">Include elements</span></a>
              </li>
            </ul>
          </li>
          <li class="submenu sibling"><a href="#" title="Modules" class="submenu sibling" aria-haspopup="true"...

CSS

#wrapper {
  max-width: 90vw;
  margin: auto;
  position: relative;
  background-color: cadetblue;
  overflow: hidden;
}
.nav-main ul ul {
  display: none;
}
.nav-main li {
  display: inline-block;
}
main .inside {
  padding: 2rem 2rem 2rem calc(20vw + 2rem);
}
.slide-nav {
  position: absolute;
  left: 0;
  background-color: beige;
  width: 20vw;
}
#show-menu {
  display: none;
}
[for="show-menu"] {
  display: block;
  line-height: 32px;
  background-color: black;
  color: beige;
  text-align: center;
  cursor: pointer;
  transition: all .5s ease 0s;
}
#show-menu:checked + label {
  background-color: tomato;
}
.nav-left {
  transform: translate(-100%);
  transition: all .5s ease 0s;
}
#show-menu:checked + label + nav {
  transform: translate(0);
}