JSFiddle - React, Tailwind, and code Playground

by cmruser

HTML

<div class="admin">
  <header class="admin-header">
    <div class="branding">logo</div>
    <ul class="nav"><li>link</li></ul>
    <ul class="nav"><li>link</li></ul>
  </header>
  <div class="wrapper">
    <aside class="admin-aside">
      <ul class="nav"><li>link</li></ul>
    </aside>
    <main class="admin-main">main</main>
  </div>
  <footer class="admin-footer">footer</footer>
</div>

CSS

html,body { margin:0; padding:0;}
/* admin */
.admin {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.admin .wrapper {
  display: flex;
  flex: 1 0 auto;
}
.admin-header {
  display: flex;
}
.admin-aside {
  width: 340px;
}
.admin-main {
  flex: 1;
}
.admin-footer {}

.nav { padding:0; margin:0; list-style:none;}
.nav li { display: inline-block;}