JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<div class="container">
  <div class="header">
    <h2>Hello world</h2>
  </div>
  <div class="menu">
    <a href="">link1</a>
    <a href="">link2</a>
    <a href="">link3</a>
  </div>
  <div class="content">
  
  </div>
</div>

CSS

html, body {
  height: 100%;
  margin: 0;
}

body {
  padding: 10px;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.container {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr;
  background: pink;
  padding: 5px;
}

h2 {
  margin: 0;
}

.header {
  background: orange;
  padding: 20px;
}

.menu {
  display: flex;
  background: lightblue;
  padding: 5px;
}

.content {
  background: yellow;
}

a {
  padding: 5px;
  background: orange;
  margin-right: 5px;
}