JSFiddle - React, Tailwind, and code Playground

by Sherbrow

HTML

<link rel="stylesheet" href="http://current.bootstrapcdn.com/bootstrap-v204/css/bootstrap.css">
    <div class="btn-group">
        <div class="dropdown dropdown-btn">
            <div class="dropdown-toggle" data-toggle="dropdown">
                <span id="uniqueId">Text1</span><span class="caret"/>
            </div >
            <ul class="dropdown-menu">
                <li><a onclick="javascript:someFunction()">Item1</a></li>
                <li><a onclick="javascript:someFunction()">Item2</a></li>
                <!-- ... -->
            </ul>
        </div>
        <div class="dropdown dropdown-btn">
            <div class="dropdown-toggle" data-toggle="dropdown">
                <span id="uniqueId2">Text2</span><span class="caret"/>
            </div >
            <ul class="dropdown-menu">
                <li><a onclick="javascript:someOtherFunction()">Item1</a></li>
                <li><a onclick="javascript:someOtherFunction()">Item2</a></li>
                <!-- ... -->
            </ul>
        </div>
    </div>

CSS

/* Not scripted */
body { padding: 20px; }
.btn-group > .dropdown > .dropdown-menu { text-align: left; }
.btn-group > .dropdown > .dropdown-toggle { background: yellow; }


/* LESS script */
    

.dropdown-btn {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */

  *zoom: 1;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 18px;
  *line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(top, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #e6e6e6;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */

  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  border: 1px solid #cccccc;
  *border: 0;
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  *margin-left: .3em;
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.dropdown-btn:hover,
.dropdown-btn:active,
.dropdown-btn.active,
.dropdown-btn.disabled,
.dropdown-btn[disabled] {
  background-color:...

JavaScript

$('.dropdown-btn').on('click.dropdownbtn',function(e) { 
    e.stopPropagation();
    e.preventDefault();
    $(this).children('.dropdown-toggle').trigger('click.dropdown.data-api');
});