JSFiddle - React, Tailwind, and code Playground

HTML

<h2>Sample menu with Zenario</h2>

<div class="zenario_slot zenario_menu zenario_menu_bottom">
	<div class="wrap_menu">
		<div class="wrap_menu_outer">
			<div class="wrap_menu_inner">
				<ul>
					<li onclick="" class="level1_on level1_1_on has_child current">
						<div class="left_end"></div>
							<span class="menu_image"></span>
								<a href="#">Item 1</a>
								<ul>
									<li class="level2 level2_1">
										<span class="menu_image"></span>
										<a href="#">Item 1.1</a>
									</li>
									<li class="level2 level2_2">
										<span class="menu_image"></span>
										<a href="#">Item 1.2</a>
									</li>
									<li class="level2 level2_3">
										<span class="menu_image"></span>
										<a href="#">Item 1.3</a>
									</li>
								</ul>
						<div class="right_end"></div>
					</li>
				</ul>
				<ul>
					<li onclick="" class="level1 level1_2 has_child">
						<div class="left_end"></div>
							<span class="menu_image"></span>
								<a href="#">Item 2</a>
								<ul>
									<li class="level2 level2_1">
										<span class="menu_image"></span>
										<a href="#">Item 2.1</a>
									</li>
									<li class="level2 level2_2">
										<span class="menu_image"></span>
										<a href="#">Item 2.2</a>
									</li>
									<li class="level2 level2_3">
										<span class="menu_image"></span>
										<a href="#">Item 2.3</a>
									</li>
								</ul>
						<div class="right_end"></div>
					</li>
				</ul>
				<ul>
					<li onclick="" class="level1 level1_3 has_child">
						<div class="left_end"></div>
							<span class="menu_image"></span>
								<a href="#">Item 3</a>
								<ul>
									<li class="level2 level2_1">
										<span class="menu_image"></span>
										<a href="#">Item 3.1</a>
									</li>
									<li class="level2 level2_2">
										<span class="menu_image"></span>
										<a href="#">Item 3.2</a>
									</li>
									<li class="level2 level2_3">
										<span...

CSS

body {
    font-family:Verdana,Arial,Helvetica;
	font-size:14px;
}

.zenario_menu_bottom {
	width:500px;
	overflow:hidden;
	background:#F0F0F0;
	padding:20px;
}
	
.zenario_menu_bottom a {
	color:#333;
	text-decoration:none;
}
		
.zenario_menu_bottom ul,
.zenario_menu_bottom ul li {
	list-style:none;
	padding:0;
	margin:0;
}
		
.zenario_menu_bottom .wrap_menu_inner > ul {
	float:left;
	width:auto;
	display:inline-block;
	padding:5px 10px;
	border-left:1px solid #ccc;
}
		
.zenario_menu_bottom .wrap_menu_inner > ul:first-child {
	padding-left:0;
	border-left:0;
}
		
.zenario_menu_bottom ul ul {
	margin-left:8px;
	font-size:13px;
}
		
.zenario_menu_bottom ul ul li a:before {
    content:"\00bb ";
}