JSFiddle - React, Tailwind, and code Playground

HTML

<span class="inline-dropdown-menu">
    <a href="">My Link that reveals a DropDown Menu when clicked on<span class="caret"></span></a>

    <ul class="inline-dropdown-menu-list">
        <li class="bottomBorder">
            <a href="" tabindex="-1">alphabetically</a>
        </li>
        <li>
            <a href="" tabindex="-1">2. the first report, alphabetically</a>
        </li>
        <li>
            <a href="" tabindex="-1">3. the first report, alphabetically</a>
        </li>
    </ul>
</span>

CSS

.inline-dropdown-menu{

    background: #f0f;
}

.inline-dropdown-menu-list{
    display: none;
    width: 200px;
    background: #0f0;
}

JavaScript

// Show Dropdown Menu when link is clicked
$(function(){
    
  $(".inline-dropdown-menu a").click(function(e){
      e.preventDefault(); // Stop navigation
      $("body").off("click.ddls");
      $(".inline-dropdown-menu-list").toggle();
      
      //to prevent double click
      setTimeout(function(){
          $("body").on("click.ddls", function(){
              console.log("body clicked");
              $(".inline-dropdown-menu-list").hide();
              $("body").off("click.ddls");
          });
      }, 300);
  });
    
});