JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<ul class="menu lgray slide" id="menu">
	
	<li><a href="#">Blog</a>
		<!-- start level 2 -->
		<ul>
			<li><a href="#">Add post</a></li>
			<li><a href="#">Archive</a>
				<!-- start level 3 -->
				<ul>
					<li><a href="#">By Author</a></li>
					<li><a href="#">By Year</a></li>
					<li><a href="#">By Category</a></li>
				</ul>
				<!-- end level 3 -->
			</li>
			<li><a href="#">Comments<span class="bubble">50</span></a></li>
		</ul>
		<!-- end level 2 -->
	</li>
	
	<li><a href="#">Products</a>
		<!-- start mega menu -->
		<div class="cols3">
			<div class="col3">
				<h4>Two Lists and a Paragraph</h4>
			</div>
			<div class="col1">
				<h5>Javascript</h5>
				<ol>
				    <li><a href="#">Calendars</a></li>
				    <li><a href="#">Countdowns</a></li>
				    <li><a href="#">Database Abstractions</a></li>
				    <li><a href="#">Navigation</a></li>
				</ol>
			</div>
			<div class="col1">
				<h5>HTML5</h5>
				<ol>
				    <li><a href="#">Canvas</a></li>
				    <li><a href="#">Media</a></li>
				    <li><a href="#">Libraries</a></li>
				    <li><a href="#">Presentations</a></li>
				</ol>
			</div>
			<div class="col1">
				<h5>Paragraph</h5>
				<p>This <a href="#">Mega Menu</a> can handle everything. Lists, paragraphs, forms...</p>
			</div>
		</div>
		<!-- end mega menu -->
	</li>
	
	<li><a href="#">Messages<span class="bubble-alt">4</span></a></li>
	
	<li><a href="#">Updates<span class="bubble">23</span></a></li>
	
	<li class="floatr"><a href="#">Envato</a>
		<!-- start mega menu -->
		<div class="cols3">
			<div class="col1">
				<h5>Visit tuts+ sites</h5>
				<ol>
					<li><a href="#">Psdtuts+</a></li>
					<li><a href="#">Audiotuts+</a></li>
					<li><a href="#">Webdesigntuts+</a></li>
					<li><a href="#">Aetuts+</a></li>
					<li><a href="#">Wptuts+</a></li>
					<li><a href="#">Mactuts+</a></li>
				</ol>
			</div>
			<div class="col2">
				<h4>Tuts+ Network</h4>
				<p>At Envato we’re very passionate about education, that’s why we’ve created...

CSS

.lgray {
    height: 47px;
    border: 1px solid #b2b2b2;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #d4d4d4;
    background-image: -webkit-linear-gradient(top, #e0e0e0, #c8c8c8);
    background-image: -moz-linear-gradient(top, #e0e0e0, #c8c8c8);
    background-image: -o-linear-gradient(top, #e0e0e0, #c8c8c8);
    background-image: -ms-linear-gradient(top, #e0e0e0, #c8c8c8);
    background-image: linear-gradient(top, #e0e0e0, #c8c8c8);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px #f4f4f4, inset 0 -2px #b3b3b3, 0 1px 3px #ddd;
    -moz-box-shadow: inset 0 1px #f4f4f4, inset 0 -2px #b3b3b3, 0 1px 3px #ddd;
    box-shadow: inset 0 1px #f4f4f4, inset 0 -2px #b3b3b3, 0 1px 3px #ddd;
}
.lgray a {
    text-decoration: none;
}
.lgray>li>a {
    color: #444;
    font-weight: bold;
    font-size: 14px;
    line-height: 18px;
    text-shadow: 0 1px #f8f8f8;
    padding: 13px 20px 16px;
}
.lgray>li:hover>a {
    background-color: #fff;
    background-image: -webkit-linear-gradient(top, #f5f5f5, #fff);
    background-image: -moz-linear-gradient(top, #f5f5f5, #fff);
    background-image: -o-linear-gradient(top, #f5f5f5, #fff);
    background-image: -ms-linear-gradient(top, #f5f5f5, #fff);
    background-image: linear-gradient(top, #f5f5f5, #fff);
    -webkit-box-shadow: inset 0 3px #eee;
    -moz-box-shadow: inset 0 3px #eee;
    box-shadow: inset 0 3px #eee;
    border-left: none;
    padding-left: 21px;
}
.lgray>li {
    border-right: 1px solid #bbb;
    border-right: 1px solid rgba(10, 10, 10, .1);
}
.lgray>li>a {
    border-left: 1px solid #e3e3e3;
    border-left: 1px solid rgba(255, 255, 255, .35);
}
.lgray>li.floatr {
    border-right: 0;
    border-left: 1px solid #bbb;
    border-left: 1px solid rgba(10, 10, 10, .1);
}
.lgray>li>a img, .lgray li>ul>li>a img {
    border: 0;
    margin-right: 7px;
}
.lgray>li>a .bubble, .lgray li>a .bubble-alt {
    font-size: 11px;
  ...