JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn-group">
  <button class="dropdown">Select</button>
  <ul class="dropdown-menu">
    <li><a href="javascript:void(0)">Action 1</a></li>
    <li><a href="javascript:void(0)">Action 2</a></li>
    <li><a href="javascript:void(0)">Action 3</a></li>
  </ul>
</div>
<div class="btn-group">
  <button class="dropdown">Select</button>
  <ul class="dropdown-menu">
    <li><a href="javascript:void(0)">Action 1</a></li>
    <li><a href="javascript:void(0)">Action 2</a></li>
    <li><a href="javascript:void(0)">Action 3</a></li>
  </ul>
</div>

CSS

.btn-group {
  position: relative;
  display: inline-block;
  font-size: 0;
  vertical-align: middle;
}

.btn-group + .btn-group {
  margin-left: 16px;
}

.btn-group > .dropdown-menu {
  list-style-type: none;
  z-index: 1000;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 4px 0;
  margin-top: 3px;
  min-width: 160px;
  font-size: 14px;
  border: 1px solid #ccc;
  background-color: #fff;
}

.btn-group > .dropdown-menu li a {
  display: block;
  padding: 3px 12px;
  text-decoration: none;
}

JavaScript

$(function() {
  $('.dropdown').click(function() {
    $(this).next('.dropdown-menu').toggle();
  });
  $(document).click(function(e) {
    var target = e.target;
    if (!$(target).is('.dropdown') && !$(target).parents().is('.dropdown')) {
      $('.dropdown-menu').hide();
    }
  });
});