JSFiddle - React, Tailwind, and code Playground

HTML

<div id="select-box-stroke" class="grey-white-gradient">
  <div id="select-box" class="white-grey-gradient">
    <div id="dd1" class="select-dropdown">By Brand
      <ul class="dropdown">
        <li><a href="#">Button1</a>
        </li>
        <li><a href="#">Button1</a>
        </li>
        <li><a href="#">Button1</a>
        </li>
      </ul>
    </div>
    <div id="dd2" class="select-dropdown">By Model
      <ul class="dropdown">
        <li><a href="#">Button2</a>
        </li>
        <li><a href="#">Button2</a>
        </li>
        <li><a href="#">Button2</a>
        </li>
      </ul>
    </div>
    <div id="dd3" class="select-dropdown">By Price
      <ul class="dropdown">
        <li><a href="#">Button3</a>
        </li>
        <li><a href="#">Button3</a>
        </li>
        <li><a href="#">Button3</a>
        </li>
      </ul>
    </div>
  </div>
</div>

CSS

#select-box-stroke {
  width:335px;
  height:361px;
  float:left;
  -webkit-box-shadow: 0px 3px 7px 0px #979aa0;
  box-shadow: 0px 3px 7px 0px #979aa0;
}
#select-box {
  width:279px;
  height:306px;
  padding:53px 27px 0px 27px;
  margin: 1px 0px 0px 1px;
}
.select-dropdown {
  position: relative;
  margin-bottom:15px;
  text-align: left;
  padding-left: 20px;
  border:1px solid #b2b2b5;
  font: 18px'fonts/roboto_cnregular';
  line-height:43px;
  background: #dcdcdf;
  /* Old browsers */
  background: -moz-linear-gradient(top, #ffffff 0%, #c8c8cb 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #dcdcdf));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #ffffff 0%, #dcdcdf 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #ffffff 0%, #dcdcdf 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #ffffff 0%, #dcdcdf 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #ffffff 0%, #dcdcdf 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdf', GradientType=0);
  /* IE6-9 */
  -webkit-background-clip: padding-box;
  cursor: pointer;
  outline: none;
}
.select-dropdown:after {
  content: url(images/button-blue-arrow-down-normal.gif);
  width: 48px;
  height: 45px;
  margin-top:-1px;
  margin-right:-1px;
  float: right;
}
.select-dropdown:hover:after {
  content: url(images/button-blue-arrow-down-hover.gif);
  width: 48px;
  height: 45px;
  margin-top:-1px;
  margin-right:-1px;
  float: right;
}
.select-dropdown-splash:after {
  content: url(images/dropdown-arrow1.png);
  width: 60px;
  height: 57px;
  float: right;
  margin-top:-1px;
  margin-right:-1px;
  background: #22ceff;
  /* Old browsers */
  background: -moz-linear-gradient(top, #22ceff 0%, #22ceff 28%, #1cbdea 55%, #027392 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom,...

JavaScript

function DropDown(el) {
        this.dd = el;
        this.initEvents();
			}
			DropDown.prototype = {
			  initEvents: function () {
			    var obj = this;
			    obj.dd.on('click', function (event) {
			      var z = 1;
			      if (obj.dd.selector == "#dd1") z = 99;
			      else if (obj.dd.selector == "#dd2") z = 98;
			      else if (obj.dd.selector == "#dd3") z = 97;
			      else z = 1;
			      $(this).toggleClass('active');
			      $(this).attr({
			        style: 'border:1px solid red;'
			      });
			      $(this).attr({
			        style: 'position:relative !important'
			      });
			      $(this).attr({
			        style: 'z-index:' + z + ';display:block;border:1px solid red;'
			      });
			      $(this).attr('title', $(this).attr('style'));

			      event.stopPropagation();
			    });
			  }
			};

			$(function () {

			  var dd = new DropDown($('#dd1'));

			  $(document).click(function () {
			    // all dropdowns
			    $('.select-dropdown').removeClass('active');
			  });

			});

			$(function () {

			  var dd = new DropDown($('#dd2'));

			  $(document).click(function () {
			    // all dropdowns
			    $('.select-dropdown').removeClass('active');
			  });

			});

			$(function () {

			  var dd = new DropDown($('#dd3'));

			  $(document).click(function () {
			    // all dropdowns
			    $('.select-dropdown').removeClass('active');
			  });

			});
			$(function () {

			  var dd = new DropDown($('#dd4'));

			  $(document).click(function () {
			    // all dropdowns
			    $('.select-dropdown').removeClass('active');
			  });

			});
			$(function () {

			  var dd = new DropDown($('#dd5'));

			  $(document).click(function () {
			    // all dropdowns
			    $('.select-dropdown').removeClass('active');
			  });

			});