JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn-group">
            <button role="button" class="btn-md btn-example btn-blue dropdown-toggle" id="dropdown-menu-1" data-toggle="dropdown" aria-expanded="false">
              Blue <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-menu-1">
              <li role="presentation">
                <a href="#" role="menuitem" title="">Link</a>
              </li>
              <li role="presentation">
                <a href="#" role="menuitem" title="">Another Link</a>
              </li>
              <li role="presentation">
                <a href="#" role="menuitem" title="">Alternative Link</a>
              </li>
              <li class="divider"></li>
              <li role="presentation">
                <a href="#" role="menuitem" title="">Lonely Link</a>
              </li>
            </ul>
          </div>
<div class="btn-group">
            <button role="button" class="btn-md btn-example dropdown-toggle" id="dropdown-menu-2" data-toggle="dropdown" aria-expanded="false">
              Black <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-menu-2">
              <li role="presentation">
                <a href="#" role="menuitem" title="">Link</a>
              </li>
              <li role="presentation">
                <a href="#" role="menuitem" title="">Another Link</a>
              </li>
              <li role="presentation">
                <a href="#" role="menuitem" title="">Alternative Link</a>
              </li>
              <li class="divider"></li>
              <li role="presentation">
                <a href="#" role="menuitem" title="">Lonely Link</a>
              </li>
            </ul>
          </div>

CSS

.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 10px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent
}
.dropdown-group,
.btn-group {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 10px 0;
  margin: 5px 0 0;
  text-align: left;
  list-style: none;
  background-color: white;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, .175);
}
.dropdown-menu.open {
  display: block;
}
.dropdown-menu > li.divider {
  margin: 10px 0;
  height: 1px;
  background: #cacac8;
}
.dropdown-menu > li > a {
  display: block;
  padding: 8px 20px;
  clear: both;
  line-height: 1.5;
  color: #848a91;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover {
  background: #282a2e;
  color: white;
}
*[role="button"],
.btn {
  position: relative;
  display: inline-block;
  font-size: .83em;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  color: white !important;
  background: #282a2e;
  border: 1px solid #18191c;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  outline: 0;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  -moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  cursor: pointer;
}
*[role="button"],
.btn:hover {
  background: #383b41;
  text-decoration: none;
}
*[role="button"],
.btn:active {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset 0 1px 0 rgba(0,...

JavaScript

/** Dropdowns **/
$('.dropdown-toggle').click(function () {
  if ($(this).attr('aria-expanded') === "false") {
    $(this).attr('aria-expanded', true);
    var menuID = $(this).attr('id');
    $(this).siblings().each(function () {
      if ($(this).attr('aria-labelledby') == menuID) {
        $(this).addClass('open');
      }
    });
  } else {
    $(this).attr('aria-expanded', false);
    var menuID = $(this).attr('id');
    $(this).siblings().each(function () {
      if ($(this).attr('aria-labelledby') == menuID) {
        $(this).removeClass('open');
      }
    });
  }
});