JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="foo">
  <nav class="nav">
    <ul>
      <li><a href="#">Level 1</a>
        <div class="dropdown dropdown-2">
          <ul>
            <li><a href="#">Level 2</a></li>
            <div class="dropdown dropdown-3">
              <ul>
                <li><a href="#">Level 3</a></li>
              </ul>
            </div>
          </ul>
        </div>
      </li>
    </ul>
  </nav>
  <div class="bar">
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </div>
</div>

SCSS

html,
body {
  height: 100%;
}

.foo {
  display: flex;
  flex-direction: column;
  /*grid-template-areas: "nav dropdown" "links dropdown";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: auto max-content;*/
  height: 100%;
}

.bar {
  grid-area: links;
  padding: 10px;
  background-color: indianred;
}

.nav > ul > li {
  display: grid;
  grid-template-areas: "lv2 lv3";
  grid-template-columns: 1fr 3fr;
  padding: 10px;
}

.dropdown {
  padding: 10px;
  background-color: beige;
}
.nav > ul > li > a,
.dropdown-2 {
  grid-area: lv2;
}

.dropdown-3 {
  grid-area: lv3;
  background-color: lightblue;
}