JSFiddle - React, Tailwind, and code Playground

by Canet Robern

HTML

<div class="nav">
	<div class="panel">
		<ul class="list">
			<li class="item">
				<span>item1</span>
			</li>
			<li class="item">
				<span>item2</span>
			</li>
			<li class="item">
				<span>item3</span>
			</li>
			<li class="item">
				<span>item4</span>
			</li>
			<li class="item">
				<span>item5</span>
			</li>
			<li class="item">
				<span>item6</span>
			</li>
			<li class="item">
				<span>item7</span>
			</li>
			<li class="item">
				<span>item8</span>
			</li>
			<li class="item">
				<span>item9</span>
			</li>
			<li class="item">
				<span>item10</span>
			</li>
			<li class="item">
				<span>item11</span>
			</li>
			<li class="item">
				<span>item12</span>
			</li>
		</ul>
	</div>
</div>

CSS

.nav {
	width : 50px;
	height : 300px;
	padding: 0px;
	margin: 0px;
	background-color : gray;
	overflow-x: visible;
}

.nav > .panel {
	width : 200px;
	height : 100%;
	overflow-y: scroll;
	background: transparent;
}

.nav > .panel > .list {
	width : 50px;
	height : 500px;
	margin: 0px;
	padding : 0px;
	background-color : lightgray;
}

.nav > .panel > .list > .item {
	width: 50px;
	height : 30px;
	background-color : darkgray;
	padding: 0px;
	border: 1px solid black;
	list-style : none;
	cursor : pointer;
}

.nav > .panel > .list > .item:hover {
	width: 200px;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}