JSFiddle - React, Tailwind, and code Playground

by Andrew Bone

HTML

<div class="sidebar">
  <div class="container">
    <div class="profile">
      <img src="http://moss-side.yoursquaremile.co.uk/img/default-profile-pic.png" />
    </div>
    <div class="card">
      <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
      <span>Test card data</span>
    </div>
    <div class="spacer">
      <hr>
    </div>
    <div class="card">
      <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
      <span>Test card data</span>
    </div>
    <hr>
    <div class="card">
      <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
      <span>Test card data</span>
    </div>
    <hr>
    <div class="card">
      <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
      <span>Test card data</span>
    </div>
    <hr>
    <div class="card">
      <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-person-128.png" />
      <span>Test card data</span>
    </div>
  </div>
</div>

CSS

.sidebar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 400px;
  overflow: hidden;
  padding-right: 17px;
}

.sidebar:hover {
  padding-right: 20px;
  overflow-y: auto;
}

.sidebar .container {
  width: 400px;
  background: #8cc34b;
  margin-bottom: -25px;
}

.card {
  opacity: .7;
  width: 100%;
  height: 120px;
  background: #8cc34b;
}

.card span {
  position: relative;
  float: right;
  padding-right: 50px;
  top: 50%;
}

hr {
  margin-left: 120px;
  margin-right: 20px;
  border-color: darkgreen;
  opacity: .7;
}