JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slide-container">
	<div id="slide_1">
		<a href="#">Link 1</a>
	</div>
	<div id="slide_2">
		<a href="#">Link 2</a>
	</div>
	<div id="slide_3">
		<a href="#">Link 3</a>
	</div>
</div>

CSS

#slide_1, #slide_2, #slide_3 {
	background-color: #000;
	right:0px;
	height:36px;
	width:45px;
	margin:0;
	padding:0;
	position:fixed;
	-webkit-transition-duration: 1s;
	-moz-transition-duration: 1s;
	-o-transition-duration: 1s;
	transition-duration: 1s;
}
#slide_1:hover, #slide_2:hover, #slide_3:hover {
	width: 140px;
}
#slide_1{
	top:25px;
}
#slide_2{
	top:65px;
}
#slide_3{
	top:105px;
}
#slide-container a{
	display:none;
	padding-top: 5px;
	padding-left: 45px;
	font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	text-transform: lowercase;
	width:100%;
	height:100%;
	visibility:hidden;
  	opacity:0;
  	transition:visibility 0s linear 0.5s,opacity 0.5s linear;
}

#slide_1:hover a, #slide_2:hover a, #slide_3:hover a {
	display: block;
  	visibility:visible;
  	opacity:1;
  	transition-delay:0s;
}