JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="drop-down">
        <a href="#"> Main </a> 
        <ul class="sub-menu">
        <li><a href="#">Sub</a> </li>
        <li><a href="#">Sub</a> </li>
        <li><a href="#">Sub</a> </li>
    </ul></li>
    <li><a href="#">Main</a> </li>
    <li><a href="#">Main</a> </li>
 <li class="drop-down">
        <a href="#"> Main </a> 
        <ul class="sub-menu">
        <li><a href="#">Sub</a> </li>
        <li><a href="#">Sub</a> </li>
        <li><a href="#">Sub</a> </li>
    </ul></li>
    <li><a href="#">Main</a> </li>
</ul>

CSS

.sub-menu {
    
    display: none;
}

JavaScript

$( ".drop-down>a" ).on("click", function() {
      $(this).siblings('.sub-menu').slideToggle();
    });
    
    $('.drop-down').fadeTo('slow', 0.3);