JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <div class="logo">MailMail</div>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Mail</a></li>
    <li><a href="#">Chat</a></li>
  </ul>
</header>

<div class="content">
  <div class="cont">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo blanditiis sed veniam, doloremque porro quibusdam, quidem laudantium possimus molestiae minima nam non beatae totam odio nihil error, cum ullam excepturi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo blanditiis sed veniam, doloremque porro quibusdam, quidem laudantium possimus molestiae minima nam non beatae totam odio nihil error, cum ullam excepturi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo blanditiis sed veniam, doloremque porro quibusdam, quidem laudantium possimus molestiae minima nam non beatae totam odio nihil error, cum ullam excepturi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo blanditiis sed veniam, doloremque porro quibusdam, quidem laudantium possimus molestiae minima nam non beatae totam odio nihil error, cum ullam excepturi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo blanditiis sed veniam, doloremque porro quibusdam, quidem laudantium possimus molestiae minima nam non beatae totam odio nihil error, cum ullam excepturi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo blanditiis sed veniam, doloremque porro quibusdam, quidem laudantium possimus molestiae minima nam non beatae totam odio nihil error, cum ullam excepturi.
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo blanditiis sed veniam, doloremque porro quibusdam, quidem laudantium possimus molestiae minima nam non beatae totam odio nihil error, cum ullam excepturi.
    
  </div>
</div>

<div class="footer">
  <p>Some footer content goes in here</p>
</div>

CSS

* {
  margin: 0; padding: 0;
}
html, body {
  height: 100%;
}
.logo {
  float: left;
  font-size: 20px;
  color: white;
  padding: 12px;
}
header {
  background-color: #444;
  overflow: auto;
}
header ul {
  float: left;
  overflow: auto;
}
header li {
  float: left;
  list-style-type: none;
}
header li a {
  text-decoration: none;
  padding: 15px;
  display: block;
  color: white;
}

.footer {
 background-color: #3ac; 
 color: #fff;
 text-align: center;
}
.footer p{
  padding: 15px;
  
}

.content {
  height: calc(100% - 96px );
  overflow: auto;
}
.cont {
  text-align: justify;
  width: 350px;
  margin: auto;
}