JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<section class="main">
  <div class="wrapper-demo">
    <div id="dd" class="wrapper-dropdown-1" tabindex="1">
      <span>Gender</span>
      <ul class="dropdown" tabindex="1">
        <li><a href="#">Male</a></li>
        <li><a href="#">Female</a></li>
      </ul>
    </div>
  </div>
</section>

CSS

/* DEMO 1 */

.wrapper-dropdown-1 {
  /* Size and position */
  position: relative;
  /* Enable absolute positionning for children and pseudo elements */
  width: 200px;
  padding: 10px;
  margin: 0 auto;
  /* Styles */
  background: #9bc7de;
  color: #fff;
  outline: none;
  cursor: pointer;
  /* Font settings */
  font-weight: bold;
}

.wrapper-dropdown-1:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  right: 16px;
  top: 50%;
  margin-top: -6px;
  border-width: 6px 0 6px 6px;
  border-style: solid;
  border-color: transparent #fff;
}

.wrapper-dropdown-1 .dropdown {
  /* Size & position */
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  /* Styles */
  background: #fff;
  list-style: none;
  font-weight: normal;
  /* Cancels previous font-weight: bold; */
  /* Hiding */
  opacity: 0;
  pointer-events: none;
}

.wrapper-dropdown-1 .dropdown li a {
  display: block;
  text-decoration: none;
  color: #9e9e9e;
  padding: 10px 20px;
}


/* Hover state */

.wrapper-dropdown-1 .dropdown li:hover a {
  background: #f3f8f8;
}


/* Active state */

.wrapper-dropdown-1.active .dropdown {
  opacity: 1;
  pointer-events: auto;
}

.wrapper-dropdown-1.active:after {
  border-color: #9bc7de transparent;
  border-width: 6px 6px 0 6px;
  margin-top: -3px;
}

.wrapper-dropdown-1.active {
  background: #9bc7de;
  background: -moz-linear-gradient(left, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9bc7de), color-stop(78%, #9bc7de), color-stop(78%, #ffffff), color-stop(100%, #ffffff));
  background: -webkit-linear-gradient(left, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
  background: -o-linear-gradient(left, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
  background: -ms-linear-gradient(left, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
  background: linear-gradient(to right, #9bc7de 0%, #9bc7de 78%, #ffffff 78%, #ffffff 100%);
  filter:...

JavaScript

function DropDown(el) {
  this.dd = el;
  this.placeholder = this.dd.children('span');
  this.opts = this.dd.find('ul.dropdown > li');
  this.val = '';
  this.index = -1;
  this.initEvents();
}
DropDown.prototype = {
  initEvents: function() {
    var obj = this;
    obj.dd.on('click', function(event) {
      $(this).toggleClass('active');
      return false;
    });

    obj.opts.on('click', function() {
      var opt = $(this);
      obj.val = opt.text();
      obj.index = opt.index();
      obj.placeholder.text('Gender: ' + obj.val);
    });
  }
}

$(function() {
  var dd = new DropDown($('#dd'));
  $(document).click(function() {
    // all dropdowns
    $('.wrapper-dropdown-1').removeClass('active');
  });
});