JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar" hidden>
        <li class="active"><a href="#">Overview <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Reports</a></li>
        <li><a href="#">Analytics</a></li>
        <li><a href="#">Export</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="">Nav item</a></li>
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>
        <li><a href="">More navigation</a></li>
      </ul>
      <ul class="nav nav-sidebar">
        <li><a href="">Nav item again</a></li>
        <li><a href="">One more nav</a></li>
        <li><a href="">Another nav item</a></li>
      </ul>
      <ul id="logout_sidebar_button" class="nav nav-sidebar">
          <li><a href="#">Signout</a></li>
      </ul>
   </div>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height:100%;
}

#logout_sidebar_button {
    position: absolute;
    display: inline-block;
    bottom: 0;
    left: 15px;
}

.sidebar {
    color: white;
    background:hsl(227, 49%, 89%);
    position: relative;
    min-height: 100%;
    max-width: 260px;
    padding-bottom: 40px;
}
.sidebar li {
    margin-left: -15px;
    margin-right: -15px;
}