JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.min.css">
<body>
  <aside class="aside">
    <h3>Aside</h3>
    <hr/>
    <ul>
      <li>test</li>
    </ul>
  </aside>
  <section class="list">
    <h1>List</h1>
    <ul class="links">
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
      <li>test</li>
    </ul>
  </section>
</body>

CSS

html{
  min-height: 100%;
  position:relative;
}
body {
  height: 100%;
  width: 100%;
}

body {
  background: rgba(117, 137, 12, 1);
  background: -moz-linear-gradient(top, rgba(117, 137, 12, 1) 0%, rgba(164, 179, 87, 1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(117, 137, 12, 1)), color-stop(100%, rgba(164, 179, 87, 1)));
  background: -webkit-linear-gradient(top, rgba(117, 137, 12, 1) 0%, rgba(164, 179, 87, 1) 100%);
  background: -o-linear-gradient(top, rgba(117, 137, 12, 1) 0%, rgba(164, 179, 87, 1) 100%);
  background: -ms-linear-gradient(top, rgba(117, 137, 12, 1) 0%, rgba(164, 179, 87, 1) 100%);
  background: linear-gradient(to bottom, rgba(117, 137, 12, 1) 0%, rgba(164, 179, 87, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#75890c', endColorstr='#a4b357', GradientType=0);
}

.aside {
  width: 20%;
  /*margin-top: 4%;*/
  color: black;
  background-color: #f7f7f7;
  height: 100%;
  position:absolute;
  top:0;
  bottom:0;
}

.list {
  width: 80%;
  float: right;
  color: white;
  height: 100%;
}

.list h1 {
  margin-left: 54px;
  /*margin-left: 4.5%;*/
}

.list li {
  list-style: none;
  padding: 2%;
  margin: 1%;
  background-color: white;
  color: black;
  border: solid black;
  border-width: thin;
}

.list li a {
  text-decoration: none;
}

.aside h3 {
  text-align: center;
  margin-bottom: 20%;
}

.aside li {
  list-style: none;
  padding: 0% 0% 10% 10%;
  /*text-align: center;*/
}

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}