JSFiddle - React, Tailwind, and code Playground

HTML

<section id="main"> 
    <article> 
        <h1 id="positionText">Incoming</h1> 
        
        <div>This is a dropdown menu attached to a link. 
            
            <a class="button menu" href="#">Dropdown Menu</a> 
            <nav class="dropdown-menu" id="nav-dropdown-menu"> 
                <ol class="menu-dropdown left"> 
                    <li class="menu-dropdown-item"> 
                        <input type="checkbox" class="menu-dropdown-checkbox" name="item-1" /> 
                        <label class="menu-dropdown-label-name">Group 1</label> 
                        <label class="menu-dropdown-label-counter">0</label> 
                    </li> 
                    <li class="menu-dropdown-item"> 
                        <input type="checkbox" class="menu-dropdown-checkbox" name="item-2" /> 
                        <label class="menu-dropdown-label-name">Group 2</label> 
                        <label class="menu-dropdown-label-counter">2</label> 
                    </li> 
                    <li class="menu-dropdown-item"> 
                        <input type="checkbox" class="menu-dropdown-checkbox" name="item-3" /> 
                        <label class="menu-dropdown-label-name">Group 3</label> 
                        <label class="menu-dropdown-label-counter">99</label> 
                    </li> 
                    <li class="menu-dropdown-item"> 
                        <input type="checkbox" class="menu-dropdown-checkbox" name="item-4" /> 
                        <label class="menu-dropdown-label-name">Group 4</label> 
                        <label class="menu-dropdown-label-counter">99</label> 
                    </li> 
                    <li class="menu-dropdown-item"> 
                        <input type="checkbox" class="menu-dropdown-checkbox" name="item-5" /> 
                        <label class="menu-dropdown-label-name">Group 5</label> 
                        <label class="menu-dropdown-label-counter">99</label> 
         ...

CSS

/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
/* line 10, ../sass/menu.scss */
#main {
    background: #EFEFEF;
    padding: 1em;
}

/* line 14, ../sass/menu.scss */
a.button {
    display: inline-block;
    line-height: normal;
}
/* line 17, ../sass/menu.scss */
a.button:hover {
    background: #efefef;
}
/* line 20, ../sass/menu.scss */
a.button.active {
    background: #fff;
    z-index: 999;
}

/* line 25, ../sass/menu.scss */
nav.dropdown-menu {
    display: none;
    background: white;
    border: 1px solid #AAA;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    cursor: default;
    font: normal 13px arial,sans-serif;
    outline: none;
    overflow: hidden;
    position: absolute;
    z-index: 99;
    width: 200px;
}
/* line 39, ../sass/menu.scss */
nav.dropdown-menu.active {
    display: block !important;
}
/* line 42, ../sass/menu.scss */
nav.dropdown-menu .menu-dropdown {
    padding: 0;
    margin: 0.3em 0;
    max-height: 160px;
    overflow-x: hidden;
    overflow-y: auto;
}
/* line 48, ../sass/menu.scss */
nav.dropdown-menu .menu-dropdown::-webkit-scrollbar {
    background: transparent;
    overflow: visible;
    width: 15px;
}
/* line 53, ../sass/menu.scss */
nav.dropdown-menu .menu-dropdown::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border: solid white;
}
/* line 57, ../sass/menu.scss */
nav.dropdown-menu .menu-dropdown .menu-dropdown-item {
    -moz-user-select: none;
    -o-text-overflow: ellipsis;
    -o-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    line-height: normal;
    overflow: hidden;
    padding: 2px 0 3px 6px;
    text-overflow: ellipsis;
    user-select:...

JavaScript

//Drop-down Detailed menu
$(".button.menu").click(function(e) {
    e.preventDefault();
    var selectedElement = $(this);
    var elementHeight = selectedElement.height();
    var elementPosition = selectedElement.position();
    $("#positionText").text("located left: " + elementPosition.left + ", top: " + elementPosition.top);
    //selectedElement.toggleClass("active");
    selectedElement.next("nav.dropdown-menu").toggleClass("active").css({
        'top': elementPosition.top + elementHeight,
        'left': elementPosition.left
    })
});

//Drop-down Detailed menu
$(".button.poptip").click(function(e) {
    e.preventDefault();
    var selectedElement = $(this);
    var elementHeight = selectedElement.height();
    var elementPosition = selectedElement.position();
    $("#positionText").text("located left: " + elementPosition.left + ", top: " + elementPosition.top);
    //selectedElement.toggleClass("active");
    selectedElement.next("nav.poptip-menu").toggleClass("active").css({
        'top': elementPosition.top + elementHeight + 9,
        'left': elementPosition.left
    })
});

//Drop-down Options menu
$(".button.options").click(function(e) {
    e.preventDefault();
    var selectedElement = $(this);
    var elementHeight = selectedElement.height();
    var elementPosition = selectedElement.position();
    $("#positionText").text("located right: " + elementPosition.left + ", top: " + elementPosition.top);
    //selectedElement.toggleClass("active");
    selectedElement.next("nav.options-menu").toggleClass("active").css({
        'top': elementPosition.top + elementHeight,
        'left': elementPosition.left
    })
});

$('button.close').click(function(e) {
    //$(this).parent("nav").removeClass("active");
});

$('*').click(function(e){
    console.debug(this);
    var parents = $(this).parents();
    var flag = false;
    //console.debug(parents);
    if (!$(this).hasClass("button menu")) {
        $.each(parents, function(index, element) {
         ...