JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="sidebar">
    <div id="logo"></div>
    <nav role="navigation">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact Us</a></li>
      </ul>
    </nav>
  </div>
  <div id="main"></div>
</div>

CSS

* {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body,
#container,
#sidebar,
#main {
  height: 100%;
}

html {
  font-family: Arial, sans-serif;
  min-width: 400px;
  min-height: 400px;
}

#sidebar {
  float: left;
  width: 30%;
}

  #logo {
    height: 20%;
    background: #f2594b;
  }

  #sidebar nav {
    height: 80%;
    padding-top: 1.2em;
    background: #e9f1df;
  }

    #sidebar nav ul {
      list-style: none;
    }

      #sidebar nav a {
        font-size: .9em;
        font-weight: bold;
        display: block;
        margin-left: 2em;
        line-height: 3;
        letter-spacing: 0.1em;
        text-decoration: none;
        text-transform: uppercase;
        color: #36b1bf;
        transition: border-right .2s ease;
      }

      #sidebar nav a:hover,
      #sidebar nav a:active {
        border-right: .2em solid #f2385a;
      }

#main {
  float: right;
  width: 70%;
  background: #ff974f;
}