JSFiddle - React, Tailwind, and code Playground

by philfreo

HTML

<script src="http://robdel12.github.io/DropKick/dropkick.min.js"></script>
<script src="http://robdel12.github.io/DropKick/plugins/dropkick.jquery.js"></script>
<link rel="stylesheet" href="http://robdel12.github.io/DropKick/css/example.css">
<link rel="stylesheet" href="http://robdel12.github.io/DropKick/css/dropkick.css">
     <select id="normal_select">
        <option disabled selected class="hidden-option">Choose One</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        <option value="AR">Arkansas</option>
        <option value="CA">California</option>
        <option value="CO">Colorado</option>
        <option value="CT">Connecticut</option>
        <option value="DE">Delaware</option>
        <option value="DC">District Of Columbia</option>
        <option value="FL">Florida</option>
        <option value="GA">Georgia</option>
        <option value="HI">Hawaii</option>
        <option value="ID">Idaho</option>
        <option value="IL">Illinois</option>
        <option value="IN">Indiana</option>
        <option value="IA">Iowa</option>
        <option value="KS">Kansas</option>
        <option value="KY">Kentucky</option>
        <option value="LA">Louisiana</option>
        <option value="ME">Maine</option>
        <option value="MD">Maryland</option>
        <option value="MA">Massachusetts</option>
        <option value="MI">Michigan</option>
        <option value="MN">Minnesota</option>
        <option value="MS">Mississippi</option>
        <option value="MO">Missouri</option>
        <option value="MT">Montana</option>
        <option value="NE">Nebraska</option>
        <option value="NV">Nevada</option>
        <option value="NH">New Hampshire</option>
        <option value="NJ">New Jersey</option>
        <option value="NM">New Mexico</option>
        <option value="NY">New York</option>
        <option value="NC">North Carolina</option>
       ...

JavaScript

$("#normal_select").dropkick({
 });

$('#autoheight_select').dropkick({
  open: function () {
    var $dk = $(this.data.elem),
      $dkOptsList = $(".dk-select-options", $dk),
      dropUp = $dk.hasClass("dk-select-open-up"),
      spaceAbove = $dk.offset().top - window.scrollY,
      spaceBelow = window.innerHeight - ( spaceAbove + $dk.outerHeight() );

    $dkOptsList.css({
      "max-height": $dkOptsList[0].scrollHeight + "px",
      "height": ( dropUp ? spaceAbove : spaceBelow ) - 20 + "px"
    });
  }
});