JSFiddle - React, Tailwind, and code Playground

by kpagcha

HTML

<div class="sidebar">
  <div class="sidebar-head">H</div>
  <ul class="menu">
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
    <li><a href="">6</a></li>
    <li class="bottom"><a href="">7</a></li>
    <li><a href="">8</a></li>
    <li><a href="">9</a></li>
  </ul>
</div>

CSS

.sidebar {
	display: flex;
	flex-direction: column;
	box-shadow: none;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	padding-top: 70px;
	width: 230px;
	overflow-x: visible;
	overflow-y: auto;
	background-color: #222d32;
	width: 50px;
}

.sidebar-head {
	display: flex;
	align-items: center;
	padding: 10px;
	margin-bottom: 20px;
  color: #fff;
}

.menu {
	margin-bottom: 0;
  padding-bottom: 10px;
  padding-left: 0;
  list-style: none;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.menu > li {
  width: 100%;
}

.menu > li > a {
	position: relative;
	display: flex;
	align-items: center;
	padding: 12px 15px;
	color: #fff;
	background: #0d1214;
	border-left-color: #009688;
	text-decoration: none;
	overflow: hidden;
}

.bottom {
  margin-top: auto;
}