JSFiddle - React, Tailwind, and code Playground

by Mohsen Safari Roodbar

HTML

<div id="left_nav_wrapper">
  <div class="sidebar_wrapper">
    <div class="sidebar_header">Header</div>
    <div class="sidebar_content">Content</div>
  </div>
  <div class="sidebar_wrapper">
    <div class="sidebar_header">Header</div>
    <div class="sidebar_content">Content</div>
  </div>
</div>

CSS

.sidebar_wrapper {
	width: 150px;
	overflow: hidden;
}
.sidebar_header {
	width: 150px;
	background-color: #F18986;
	position: relative;
	z-index: 3
}
.sidebar_content {
	width: 150px;
	display: block;
	margin-top: -20px;
	-webkit-transition: all 1s;
	position: relative;
	z-index: 1;
	background-color: #444;
}
.sidebar_header:hover + .sidebar_content {
	display: inherit;
	margin-top: 0px;
}