JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scrollbar" id="ex4">
	<div class="content">
	<div id="menuwrapper">
			<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Products</a>
							<ul>
									<li><a href="#">Product 1</a>
											<ul>
													<li><a href="#">Sub Product 1</a></li>
													<li><a href="#">Sub Product 2</a></li>
													<li><a href="#">Sub Product 3</a></li>
											</ul>
									</li>
									<li><a href="#">Product 2</a></li>
									<li><a href="#">Product 3</a></li>
							</ul>
					</li>
					<li><a href="#">About Us</a>
							<ul>
									<li><a href="#">Faqs</a></li>
									<li><a href="#">Contact Us</a></li>
									<li><a href="#">Where are we?</a></li>
							</ul>
					</li>
					<li><a href="#">Help</a>

						<li><a href="#">Home</a></li>
						<li><a href="#">Products</a>
								<ul>
										<li><a href="#">Product 1</a>
												<ul>
														<li><a href="#">Sub Product 1</a></li>
														<li><a href="#">Sub Product 2</a></li>
														<li><a href="#">Sub Product 3</a></li>
												</ul>
										</li>
										<li><a href="#">Product 2</a></li>
										<li><a href="#">Product 3</a></li>
								</ul>
						</li>
						<li><a href="#">About Us</a>
								<ul>
										<li><a href="#">Faqs</a></li>
										<li><a href="#">Contact Us</a></li>
										<li><a href="#">Where are we?</a></li>
								</ul>
						</li>
						<li><a href="#">Help</a>


							<li><a href="#">Home</a></li>
							<li><a href="#">Products</a>
									<ul>
											<li><a href="#">Product 1</a>
													<ul>
															<li><a href="#">Sub Product 1</a></li>
															<li><a href="#">Sub Product 2</a></li>
															<li><a href="#">Sub Product 3</a></li>
													</ul>
											</li>
											<li><a href="#">Product 2</a></li>
											<li><a href="#">Product 3</a></li>
									</ul>
							</li>
							<li><a href="#">About Us</a>
									<ul>
											<li><a...

CSS

.scrollbar{
width:250px;
height:300px;
background-color:lightgray;
margin-top:40px;
margin-left:40px;
overflow-y:scroll;
float:left;
}
.content{
height:450px;
}

#ex4::-webkit-scrollbar{
width:8px;
background-color:#cccccc;
}
#ex4::-webkit-scrollbar-thumb{
background-color:#333333;
border-radius:10px;
}
#ex4::-webkit-scrollbar-thumb:hover{
background-color:#999999;
border:1px solid #333333;

}
#ex4::-webkit-scrollbar-thumb:active{
background-color:#666666;
border:1px solid #333333;
}
#ex4::-webkit-scrollbar-track{
border:1px gray solid;
border-radius:10px;
-webkit-box-shadow:0 0 2px gray inset;
}
#menuwrapper ul, #menuwrapper ul li{
    margin:0;
    padding:0;
    list-style:none;
}
#menuwrapper ul li{
   background-color: #39255e ;
    border-bottom:solid 1px white;
    width:150px;
	cursor:pointer;
}
#menuwrapper ul li:hover,
#menuwrapper ul li.iehover{
    background-color:#6679e9;
    position:relative;
}
#menuwrapper ul li a{
    padding:5px 15px;
    color:#ffffff;
    display:inline-block;
    text-decoration:none;
}
#menuwrapper ul li ul{
    position:absolute;
    display:none;
}
#menuwrapper ul li:hover ul,
#menuwrapper ul li.iehover ul{
    left:150px;
    top:0px;
    display:block;
}
#menuwrapper ul li:hover ul li:hover,
#menuwrapper ul li.iehover ul li.iehover{
    background-color:#6679e9;
}

/* We style the color of level 2 links */
#menuwrapper ul li ul li a{
    display:inline-block;
    width:120px;
}

#menuwrapper ul li:hover ul li ul,
#menuwrapper ul li.iehover ul li ul{
    position:absolute;
    display:none;
}
#menuwrapper ul li:hover ul li:hover ul,
#menuwrapper ul li.iehover ul li.iehover ul{
    display:block;
    left:150px;
    top:0;
}
#menuwrapper ul li:hover ul li:hover ul li,
#menuwrapper ul li.iehover ul li.iehover ul li{
    background:#39255e;
}
#menuwrapper ul li:hover ul li:hover ul li:hover,
#menuwrapper ul li.iehover ul li.iehover ul li.iehover{
    background:#6679e9;
}
#menuwrapper ul li:hover ul li:hover ul li...