JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<input type="text" size="20" name="field1" placeholder="First Name" />
<input type="text" size="20" name="field2" placeholder="Last Name" />

<select class="selectField selectMenu form-control" name="user[address_attributes][state_id]" id="user_address_attributes_state_id"><option value="">Select State</option>
<option value="3526">Alabama</option>
<option value="3556">Alaska</option>
<option value="3547">Arizona</option>
<option value="3510">Arkansas</option>
<option value="3542">California</option>
<option value="3543">Colorado</option>
<option value="3527">Connecticut</option>
<option value="3512">Delaware</option>
<option value="3513">Florida</option>
<option value="3514">Georgia</option>
<option value="3555">Hawaii</option>
<option value="3548">Idaho</option>
<option value="3529">Illinois</option>
<option value="3530">Indiana</option>
<option value="3528">Iowa</option>
<option value="3515">Kansas</option>
<option value="3557">Kentucky</option>
<option value="3516">Louisiana</option>
<option value="3531">Maine</option>
<option value="3517">Maryland</option>
<option value="3558">Massachusetts</option>
<option value="3532">Michigan</option>
<option value="3533">Minnesota</option>
<option value="3519">Mississippi</option>
<option value="3518">Missouri</option>
<option value="3549">Montana</option>
<option value="3534">Nebraska</option>
<option value="3545">Nevada</option>
<option value="3535">New Hampshire</option>
<option value="3536">New Jersey</option>
<option value="3544">New Mexico</option>
<option value="3537">New York</option>
<option value="3520">North Carolina</option>
<option value="3550">North Dakota</option>
<option value="3538">Ohio</option>
<option...

CSS

/* line 63, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.selectMenu {
  font-family: 'Oxygen', sans-serif;
  font-size: 20px;
  height: 50px;
  -webkit-appearance: menulist-button;
}

/* line 70, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 10px;
}

/* line 76, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #fff;
  width: 220px;
  height: 42px;
}

/* line 85, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-styled {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: gray;
  padding: 11px 12px;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}
/* line 94, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-styled:after {
  content: "";
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 16px;
  right: 10px;
}
/* line 104, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-styled:hover {
  background-color: #7b7b7b;
}
/* line 107, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-styled:active, .select-styled.active {
  background-color: #737373;
}
/* line 109, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-styled:active:after, .select-styled.active:after {
  top: 9px;
  border-color: transparent transparent #fff transparent;
}

/* line 116, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-options {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
 ...

JavaScript

$(function() {

        $('select').each(function(){
            styleSelectMenu($(this));
        });
        $('input[name=field2]').on({
        	"keydown": function(e){
          	if (e.which==9){
            	$('div.select-styled').focus().click();
            }
        	}	
        });

});

// This method applies the styles to our select menu
function styleSelectMenu(selectMenu)
{
    var $this = $(selectMenu), numberOfOptions = $(selectMenu).children('option').length;

                /*** NEW - start ***/
                var $paddingCalculator = $('<div />', {
                'class' : "select-styled test"
    }).css({
                width : 0,
        visibility : "hidden"
    }).appendTo("body");
    $this.addClass('select-hidden');
    var paddingWidth = $paddingCalculator.outerWidth() + 10;
    $paddingCalculator.remove();

    //var selectWidth = $this.width() + paddingWidth;
    var selectWidth = $this.outerWidth() + paddingWidth;
    //alert(selectWidth);

    if ( !$this.parent().hasClass('select') ) {
                var $wrapper = $("<div />", {
                        'class' : "select"
        }).css({
                        width   : selectWidth
        });
        $this.wrap( $wrapper );
    }   // if

                /*** NEW - end ***/

    if ( !$this.next().hasClass('select-styled') ) {
        $this.after('<div class="select-styled"></div>');
    }    // if

    var $styledSelect = $this.next('div.select-styled');
    $styledSelect.text($this.children('option').eq(0).text());

    if ( $styledSelect.parent().find('ul').length > 0 ) {
        $styledSelect.parent().find('ul').remove();
    }   // if
    var $list = $('<ul />', {
        'class': 'select-options'
    }).insertAfter($styledSelect);

    for (var i = 0; i < numberOfOptions; i++) {
        $('<li />', {
            text: $this.children('option').eq(i).text(),
            rel: $this.children('option').eq(i).val()
        }).appendTo($list);
    }

    var $listItems =...