JSFiddle - React, Tailwind, and code Playground

by Elissa Martinez

HTML

<div class="collapsibleList">
		<label for="box1"><img src="TOPBAR_Icon_Home.png" alt="Menu icon"/></label>
		<input type="checkbox" id="box1" />
		<ul class="menu">
			<li></li>
			<li>Menu item 1</li>
			<li>Menu item 2</li>
			<li>Menu item 3</li>
			<li>Menu item 4</li>
			<li>Menu item 5</li>
		</ul>
	</div>

CSS

.menu{
	list-style-type: none;
	position: fixed;
	top: -16px;
	left: -300px;
	max-width: 300px;
	transition: left 1s ease;
	-webkit-transition: left .5s ease;
}

.menu li {
	font-family: Arial;
	font-size: 1.5em;
	font-weight: bold;
	padding: 10px;
	background-color: #ffd012;
	color: #000000;
	border-bottom: 1px solid #ffffff;
	padding-left: 55px;
	min-height: 25px;
}

.collapsibleList > input + * {
	display: none;
}
 
.collapsibleList > input:checked + * {
	display: block;
	left: -40px;
}

.collapsibleList > input {
	display: none;
}

.menu li:last-child {
	border-bottom-right-radius: 25px;
	border: none;
}

label {
	cursor: pointer;
	position: fixed;
	left: 10px;
	top: 10px;
	z-index: 2;
}