JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<input type="checkbox" name="" id="toggle-sidebar" class="toggle-sidebar-input" checked>
<label class="toggle-sidebar-label" for="toggle-sidebar"><span>Show sidebar</span></label>
<div class="layout-wrapper">
  <header class="pl-2">
    <h1 class="d-inline">Yolo</h1>
  </header>
  <aside class="overflow-y-auto p-2">
    <a href="" class="text-white d-block">Link 1</a>
    <a href="" class="text-white d-block">Link 2</a>
    <a href="" class="text-white d-block">Link 3</a>
    <a href="" class="text-white d-block">Link 4</a>
    <a href="" class="text-white d-block">Link 5</a>
    <a href="" class="text-white d-block">Link 6</a>
    <a href="" class="text-white d-block">Link 7</a>
    <a href="" class="text-white d-block">Link 8</a>
    <a href="" class="text-white d-block">Link 9</a>
    <a href="" class="text-white d-block">Link 10</a>
    <a href="" class="text-white d-block">Link 11</a>
    <a href="" class="text-white d-block">Link 12</a>
    <a href="" class="text-white d-block">Link 13</a>
    <a href="" class="text-white d-block">Link 14</a>
    <a href="" class="text-white d-block">Link 15</a>
    <a href="" class="text-white d-block">Link 16</a>
    <a href="" class="text-white d-block">Link 17</a>
    <a href="" class="text-white d-block">Link 18</a>
    <a href="" class="text-white d-block">Link 19</a>
    <a href="" class="text-white d-block">Link 20</a>
    <a href="" class="text-white d-block">Link 21</a>
    <a href="" class="text-white d-block">Link 22</a>
    <a href="" class="text-white d-block">Link 23</a>
    <a href="" class="text-white d-block">Link 24</a>
    <a href="" class="text-white d-block">Link 25</a>
    <a href="" class="text-white d-block">Link 26</a>
    <a href="" class="text-white d-block">Link 27</a>
    <a href="" class="text-white d-block">Link 28</a>
    <a href="" class="text-white d-block">Link 29</a>
    <a href="" class="text-white d-block">Link 30</a>
    <a href="" class="text-white d-block">Link 31</a>
    <a href=""...

CSS

:root {
  --layout-grid-template-areas: 'header''main';
  --layout-grid-columns: 1fr;
  --display-aside: none;
  font-family: sans-serif;
}
.toggle-sidebar-input:checked ~ .layout-wrapper {
  --layout-grid-template-areas: 'header header''aside main';
  --layout-grid-columns: 21rem 1fr;
  --display-aside: block;
}

body {
  overflow-y: hidden;
  padding: 0;
  margin: 0;
}
.layout-wrapper {
  height: 100vh;
  display: grid;
  grid-template-rows: max-content 1fr;
  grid-template-columns: var(--layout-grid-columns);
  grid-template-areas: var(--layout-grid-template-areas);
}

header {
  grid-area: header;
  background-color: dodgerblue;
}

aside {
  display: var(--display-aside);
  grid-area: aside;
  background-color: maroon;
}

main {
  grid-area: main;
}

.text-white {
  color: white;
}
.d-block {
  display: block;
}
.d-inline {
  display: inline;
}
.overflow-y-auto {
  overflow-y: auto;
}

.p-2 {
  padding: 2rem;
}
.pl-2 {
  padding-left: 2rem;
}

.toggle-sidebar-label,
.toggle-sidebar-input {
  position: absolute;
  top: 8px;
}

.toggle-sidebar-label {
  right: 10px;
}
.toggle-sidebar-input {
  right: 115px;
}