JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
    <h2>Basic</h2>
    <select id="select1">
      <option value="a">Option 1</option>
      <option value="b">Option 2</option>
      <option value="c" selected>Option 3</option>
    </select>
    <div class="text-center">
      <a id="getValue1" class="btn">Selected Value</a>  
    </div>
  </div>
  <div class="box">
    <h2>Disabled Option</h2>
    <select id="select2">
      <option value="a">Option 1</option>
      <option value="b">Option 2</option>
      <option value="c">Option 3</option>
      <option value="d" disabled>Option Disabled</option>
    </select>
    <div class="text-center">
      <a id="getValue2" class="btn">Selected Value</a>  
    </div>
  </div>
  
  <div class="box">
    <h2>Optgroup</h2>
    <select id="select3">
      <optgroup label="Group 1">
        <option value="a">Option 1</option>
        <option value="b">Option 2</option>
      </optgroup>
      <optgroup label="Group 2">
        <option value="c">Option 3</option>
        <option value="d" selected>Option 4</option>
      </optgroup>
    </select>
    <div class="text-center">
      <a id="getValue3" class="btn">Selected Value</a>  
    </div>
  </div>
  <div class="box">
    <h2>Multiple</h2>
    <select id="select4" multiple>
      <optgroup label="Group 1">
        <option value="a">Option 1</option>
        <option value="b">Option 2</option>
      </optgroup>
      <optgroup label="Group 2">
        <option value="c">Option 3</option>
        <option value="d" selected>Option 4</option>
      </optgroup>
      <optgroup label="Group 3">
        <option value="e">Option 5</option>
        <option value="f" selected>Option 6</option>
      </optgroup>
    </select>
    <div class="text-center">
      <a id="getValue4" class="btn">Selected Value</a>  
    </div>
  </div>
  <div class="box">
    <h2>Select Disabled</h2>
    <select id="select5" disabled>
      <option value="a" selected>Option 1</option>
      <option value="b">Option 2</option>
   ...

CSS

.selecty{width:100%;position:relative;font-size:16px;color:#1b1919}.selecty.disabled .selecty-selected{border-bottom:1px dashed #d9d6d4;cursor:not-allowed;color:#8d8480}.selecty .selecty-selected{display:block;border:none;border-bottom:1px solid #d9d6d4;width:100%;cursor:pointer;background:0 0;outline:0!important;height:36px;line-height:36px;text-align:left;font-size:16px;color:#1b1919;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.selecty .selecty-selected:after{content:"";display:inline-block;position:absolute;top:50%;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px dashed #8d8480;margin-top:-2px;right:16px}.selecty .selecty-selected:active,.selecty .selecty-selected:focus,.selecty .selecty-selected:hover{background:0 0}.selecty .selecty-options{position:absolute;top:0;left:0;background-color:#fff;margin:0;max-height:650px;width:100%;overflow-y:auto;z-index:999;border-radius:2px;padding:8px 0;-webkit-transform:scaleY(0);-ms-transform:scaleY(0);-o-transform:scaleY(0);transform:scaleY(0);-webkit-transition:opacity .45s cubic-bezier(.23,1,.32,1),-webkit-transform .45s cubic-bezier(.23,1,.32,1);-o-transition:opacity .45s cubic-bezier(.23,1,.32,1),-o-transform .45s cubic-bezier(.23,1,.32,1);transition:transform .45s cubic-bezier(.23,1,.32,1),opacity .45s cubic-bezier(.23,1,.32,1);transition:transform .45s cubic-bezier(.23,1,.32,1),opacity .45s cubic-bezier(.23,1,.32,1),-webkit-transform .45s cubic-bezier(.23,1,.32,1),-o-transform .45s cubic-bezier(.23,1,.32,1);-webkit-transform-origin:top left;-ms-transform-origin:top left;-o-transform-origin:top left;transform-origin:top left;-webkit-box-shadow:0 5px 6px -3px rgba(0,0,0,.2),0 9px 12px 1px rgba(0,0,0,.14),0 3px 16px 2px rgba(0,0,0,.12);box-shadow:0 5px 6px -3px rgba(0,0,0,.2),0 9px 12px 1px rgba(0,0,0,.14),0 3px 16px 2px rgba(0,0,0,.12);visibility:hidden}.selecty...

JavaScript

/*!
 * selecty v0.0.1 (https://github.com/undead25/selecty#readme)
 * Copyright 2016 undead25
 * Licensed under the MIT license
 */
!function(){"use strict";var e={addClass:function(e,t){var i=e.className,n=""!==i?" ":"",s=i+n+t;e.className=s},removeClass:function(e,t){var i=" "+e.className+" ";i=i.replace(/(\s+)/gi," ");var n=i.replace(" "+t+" "," ");n=n.replace(/(^\s+)|(\s+$)/g,""),e.className=n},hasClass:function(e,t){var i=e.className,n=i.split(/\s+/),s=0;for(s in n)if(n[s]==t)return!0;return!1},addEvent:function(e,t,i){e.addEventListener?e.addEventListener(t,i,!1):e.attachEvent?e.attachEvent("on"+t,i):e["on"+t]=i},removeEvent:function(e,t,i){e.removeEventListener?e.removeEventListener(t,i,!1):e.detachEvent?e.detachEvent("on"+t,i):delete e["on"+t]},removeElement:function(e){e&&e.parentNode&&e.parentNode.removeChild(e)},setUid:function(e){do e+=Math.floor(1e6*Math.random());while(document.getElementById(e));return e},clone:function(t){if("object"!=typeof t)return t;if(null===t)return t;var i={};for(var n in t)i[n]=e.clone(t[n]);return i},extend:function(){var e=arguments;if(!(e.length<1)){for(var t=this.clone(e[0]),i=1;i<e.length;i++)for(var n in e[i])t[n]=e[i][n];return t}},eventHandler:function(e){var t=e||window.event,i=t.target||t.srcElement;return{ev:t,target:i}},stopPropagation:function(e){e.stopPropagation?e.stopPropagation():window.event&&(window.event.cancelBubble=!0)}},t=function(i,n){return this instanceof t?(this.settings=e.extend({},this.defaults,n),this.el=i,this.multiple=!1,this.selected=[],this.shown=!1,this.disabled=!1,this.ul=null,this.optionLi=[],this.items=null,this.options=null,this.template='<div class="selecty"><a class="selecty-selected"></a><ul class="selecty-options"></ul></div>',void this.init(i)):new t(i,n)};t.prototype={defaults:{textDivide:", "},init:function(e){return"string"==typeof e&&"#"===e[0]&&(e=document.getElementById(e.substr(1)),this.el=e),e?e.length<1?void console.error("No options inside...