JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div id="header">
  <div class="header-item">
    <a href="#">Link 1</a>
  </div>
  <div class="header-item">
    <a href="#">Link 2</a>
  </div>
  <div class="header-item">
    <a href="#">Link 3</a>
  </div>
  <div class="header-item">
    <a href="#">Link 4</a>
  </div>
</div>

<div id="main-content">
  <div id="content-wrapper">
    <p>Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... </p>
    <p>Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... </p>
    <p>Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... </p>
    <p>Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... </p>
    <p>Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... </p>
    <p>Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... </p>
    <p>Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... </p>
    <p>Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... </p>
    <p>Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... </p>
    <p>Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... </p>
    <p>Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... </p>
    <p>Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... Lorem Ipsum... </p>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  color: white;
  background: #202020;
  font-family: areal, sans-serif;
}

a {
  color: white;
  text-decoration: none;
}

#header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 3.5em;
  box-sizing: border-box;
  display: flex;
  flex-flow: row;
  justify-content: center;
  background: #2F2F2F;
}

.header-item > a {
  height: 100%;
  width: 6em;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.header-item > a:hover {
  background: rgba(255, 255, 255, 0.1);
}

#main-content {
  margin-top: 4.5em;
  width: 100%;
  display: flex;
  flex-flow: row;
  justify-content: center;
}

#content-wrapper {
  width: 70%;
  padding: 2em;
  display: flex;
  flex-flow: column;
  justify-content: center;
  background: #303030;
}