JSFiddle - React, Tailwind, and code Playground

by kpagcha

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<div class="sidebar">
  <ul class="menu">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    <li class="bottom"><a href="#">Link 5</a></li>
    <li class="bottom"><a href="#">Link 6</a></li>
  </ul>
</div>

CSS

.sidebar {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 150px;
  overflow: visible;
  z-index: 10;
  background-color: #222d32;
  transition: left 0.3s ease, width 0.3s ease;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-start;
  flex: 1;
  padding-bottom: 10px;
  overflow: hidden;
}

.menu > li {
  width: 100%;
  list-style: none;
  flex: 1;
  max-height: 30px;
}

.menu > li > a {
  color: #fff;
  text-decoration: none;
}

.menu > li.bottom {
  align-self: end;
}