JSFiddle - React, Tailwind, and code Playground

by Ashish Kumar

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.min.js"></script>
<form id="MyForm">
  <select id="MySelect" name="select">
    <option value="">Select a value</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
  <button id="MyButton" type="submit">Submit</button>
</form>

CSS

// Start CSS Nice Select 
.button,
.nice-select {
  -webkit-tap-highlight-color: transparent
}

.nice-select,
.nice-select .list {
  background-color: #fff;
  box-sizing: border-box
}

.nice-select,
a:not(.button) {
  -webkit-transition: all .2s ease-in-out
}

.button,
.nice-select,
.nice-select .list {
  box-sizing: border-box
}

.button,
a:not(.button) {
  outline: 0;
  text-decoration: none
}

.box:after,
.credit {
  clear: both
}

.nice-select {
  border-radius: 5px;
  border: 1px solid #e0e7ee;
  clear: both;
  cursor: pointer;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  height: 42px;
  line-height: 40px;
  outline: 0;
  padding-left: 18px;
  padding-right: 30px;
  position: relative;
  text-align: left!important;
  transition: all .2s ease-in-out;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  width: auto
}

.nice-select:hover {
  border-color: #d0dae5
}

.nice-select.open,
.nice-select:active,
.nice-select:focus {
  border-color: #88bfff
}

.nice-select:after {
  border-bottom: 2px solid #90a1b5;
  border-right: 2px solid #90a1b5;
  content: '';
  display: block;
  height: 5px;
  margin-top: -4px;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  -webkit-transform-origin: 66% 66%;
  -ms-transform-origin: 66% 66%;
  transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
  width: 5px
}

.nice-select.open:after {
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg)
}

.nice-select.open .list {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: scale(1) translateY(0);
  -ms-transform: scale(1) translateY(0);
  transform: scale(1) translateY(0)
}

.nice-select.disabled {
  border-color: #e7ecf2;
  color:...

JavaScript

// Start jQuery Nice Select 
! function(e) {
  e.fn.niceSelect = function(t) {
    function s(t) {
      t.after(e("<div></div>").addClass("nice-select").addClass(t.attr("class") || "").addClass(t.attr("disabled") ? "disabled" : "").attr("tabindex", t.attr("disabled") ? null : "0").html('<span class="current"></span><ul class="list"></ul>'));
      var s = t.next(),
        n = t.find("option"),
        i = t.find("option:selected");
      s.find(".current").html(i.data("display") || i.text()), n.each(function(t) {
        var n = e(this),
          i = n.data("display");
        s.find("ul").append(e("<li></li>").attr("data-value", n.val()).attr("data-display", i || null).addClass("option" + (n.is(":selected") ? " selected" : "") + (n.is(":disabled") ? " disabled" : "")).html(n.text()))
      })
    }
    if ("string" == typeof t) return "update" == t ? this.each(function() {
      var t = e(this),
        n = e(this).next(".nice-select"),
        i = n.hasClass("open");
      n.length && (n.remove(), s(t), i && t.next().trigger("click"))
    }) : "destroy" == t ? (this.each(function() {
      var t = e(this),
        s = e(this).next(".nice-select");
      s.length && (s.remove(), t.css("display", ""))
    }), 0 == e(".nice-select").length && e(document).off(".nice_select")) : console.log('Method "' + t + '" does not exist.'), this;
    this.hide(), this.each(function() {
      var t = e(this);
      t.next().hasClass("nice-select") || s(t)
    }), e(document).off(".nice_select"), e(document).on("click.nice_select", ".nice-select", function(t) {
      var s = e(this);
      e(".nice-select").not(s).removeClass("open"), s.toggleClass("open"), s.hasClass("open") ? (s.find(".option"), s.find(".focus").removeClass("focus"), s.find(".selected").addClass("focus")) : s.focus()
    }), e(document).on("click.nice_select", function(t) {
      0 === e(t.target).closest(".nice-select").length && e(".nice-select").removeClass("open").find(".option")
    }),...