JSFiddle - React, Tailwind, and code Playground

by Leo Alfred

HTML

<h1 id="name">LFX Music</h1>
<div class="click-nav">
	<ul class="no-js">
		<li>
			<a href="#" class="clicker">Profile</a>
			<ul>
				<li>
					<a href="#">Dashboard</a>
				</li>
				<li>
					<a href="#">Settings</a>
				</li>
				<li>
					<a href="#">Privacy</a>
				</li>
				<li>
					<a href="#">Help</a>
				</li>
				<li>
					<a href="#">Sign out</a>
				</li>
			</ul>
		</li>
	</ul>
</div>
<div class="click-nav1">
	<ul class="no-js1">
		<li>
			<a href="#" class="clicker1">Profile</a>
			<ul>
				<li>
					<a href="#">Dashboard</a>
				</li>
				<li>
					<a href="#">Settings</a>
				</li>
				<li>
					<a href="#">Privacy</a>
				</li>
				<li>
					<a href="#">Help</a>
				</li>
				<li>
					<a href="#">Sign out</a>
				</li>
			</ul>
		</li>
	</ul>
</div>

CSS

div {
    display: inline;
}

JavaScript

$(function() {
	$('.click-nav > ul').toggleClass('no-js js');
	$('.click-nav .js ul').hide();
	$('.click-nav .js').click(function(e) {
		$('.click-nav .js ul').slideToggle(200);
		$('.clicker').toggleClass('active');
		e.stopPropagation();
	});
	$(document).click(function() {
		if ($('.click-nav .js ul').is(':visible')) {
			$('.click-nav .js ul', this).slideUp();
			$('.clicker').removeClass('active');
		}
	});
});
$(function() {
	$('.click-nav1 > ul').toggleClass('no-js1 js1');
	$('.click-nav1 .js1 ul').hide();
	$('.click-nav1 .js1').click(function(e) {
		$('.click-nav1 .js1 ul').slideToggle(200);
		$('.clicker1').toggleClass('active');
		e.stopPropagation();
	});
	$(document).click(function() {
		if ($('.click-nav1 .js1 ul').is(':visible')) {
			$('.click-nav1 .js1 ul', this).slideUp();
			$('.clicker1').removeClass('active');
		}
	});
});