JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="drop"> Drop me
	<ul>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
	</ul>
</ul>

<ul class="drop"> Drop me
	<ul>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
		<li>Lorem ipsum.</li>
	</ul>
</ul>

CSS

body {
	padding: 30px;
	min-height: 100vh;
	vertical-align: top;
	font-family: monospace;
}

.drop {
	display: inline-block;
	position: relative;
	padding: 0;
	margin-right: 30px;
	cursor: pointer;
	padding: 10px;
	background-color: #8C5BFF;
	color: #fff;
	transition: background-color .2s ease;
}

.drop ul {
	position: absolute;
	top: 100%;
	left: 0;
	width: 200px;
	list-style: none;
	padding: 15px;
	background-color: #FFDD56;
	color: #333;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease, visibility .2s ease, transform .2s ease
}

.drop.is-open {
	background-color: #5D3CAA;
}

.drop.is-open ul {
	opacity: 1;
	visibility: visible;
	transform: translateY(10px);
}

JavaScript

$('.drop').click(function() {
	$('.drop').removeClass('is-open');
	$(this).addClass('is-open');
})

	$(document).click(function (e){
		let drop = $('.drop');
		if (!drop.is(e.target) && drop.has(e.target).length === 0) {
			drop.removeClass('is-open')
		}
});