JSFiddle - React, Tailwind, and code Playground

by Mehdi Dehghani

HTML

<div id="wrap-categories">
    <p>Choose a category</p>
    <ul class="" style="display: none;">
        <li data-value="1">Category 1</li>
        <li data-value="2">Category 2</li>
        <li data-value="3">Category 3</li>
    </ul>
</div>

JavaScript

$('#wrap-categories').click(function(e) {
	e.stopPropagation();
});
$('#wrap-categories').click(function() {		
    $('#wrap-categories > ul').addClass('opened').show();
});

$(document).click(function() {    	
    $('#wrap-categories > ul').removeClass('opened').hide();
});