JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='drop-down-box'>
  <div class='selectors'>
    <div class='selected-box'>
      <div class='text'>
        Select
      </div><div class='vertical-mid-hack'></div>
    </div>
    <div class='selector-box'>
      <div class='text'>
        v
      </div><div class='vertical-mid-hack'></div>
    </div>
  </div>
  <div class='options-box'>
    <div class='options-box-inner'>
      <div class='inner-box'>
        
        <div class='option'>
          <div class='content'>
            Select
          </div>
        </div>
        <div class='option'>
          <div class='content'>
            option 1
          </div>
        </div>
        <div class='option'>
          <div class='content'>
            option 2
          </div>
        </div>
        <div class='option'>
          <div class='content'>
            option 3
          </div>
        </div>
        <div class='option'>
          <div class='content'>
            option 4
          </div>
        </div>
        <div class='option'>
          <div class='content'>
            option 5
          </div>
        </div>
        
      </div>
    </div>
  </div>
</div>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: white;
}
.drop-down-box {
  margin: 5px;
  font-family: arial;
  font-size: 14px;
  position: relative;
  display: inline-block;
  height: 25px;
  border-radius: 3px;
  
}
.drop-down-box .selectors {
  height: 100%;
}
.selected-box {
  color: #4D4D4D;
  color: #262626;
  border: 1px solid #ccc;
  border-right: none;
  background-color: #eee;
  line-height: 14px;
  float: left;
  height: 100%;
  min-width: 80px;
  overflow: hidden;
  padding: 0 15px 0 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  transition: background-color 0.2s linear;
}

.selected-box:hover {
  cursor: default;
  background-color: white;
  transition: background-color 0.2s linear;
}
.selected-box .text {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  max-height: 55%;
  overflow: hidden;
}
.selector-box {
  border: 1px solid tomato;
  cursor: pointer;
  float: left;
  height: 100%;
  padding: 0 10px;
  background-color: tomato;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  transition: color 0.12s linear, background-color 0.15s linear, border-color 0.15s linear;
}
.selector-box:active {
  color: white;
  background-color: brown;
  border-color: brown;
  transition: background-color 0.15s linear, border-color 0.15s linear, color 0.15s linear;
}
.selector-box .text {
  display: inline-block;
  vertical-align: middle;
}

.options-box {
  position: absolute;
  overflow: hidden;
  height: 0;
  z-index: 5;
  top: 100%;
  left: 0;
  width: 100%;
  transition: height 0.3s linear;
}
.options-box .options-box-inner {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  background-color: white;
  border: 1px solid #ccc;
  height: 97%;
  overflow-y: scroll;
}
.options-box .options-box-inner .inner-box {
  overflow-y: scroll;
  height: 90%;
  margin-top: 5px;
}
.options-box .option {
  color: #262626;
  padding: 8px 0;
}
.options-box .option:hover {
 ...

JavaScript

$(function() {
  $('body').on('click', function(event) {
  		var dropDownBoxList = $(event.target).closest('.drop-down-box');
      if(dropDownBoxList.length < 1) {
      	$('.drop-down-box').removeClass('active');
      }
  });
	$('.drop-down-box .selectors').on('click', function() {
  	$(this).closest('.drop-down-box').toggleClass('active');
  });
  $('.drop-down-box .options-box .option').on('click', function() {
  	var value = $(this).children('.content').text();
    var dropDownBox = $(this).closest('.drop-down-box');
    $(dropDownBox).find('.selected-box').find('.text').text(value);
    $(dropDownBox).removeClass('active');
  });
});