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" tabindex='1' size="20" name="field1" placeholder="First Name" />
<input type="text" tabindex='1' size="20" name="field2" id="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...

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%;
 ...

JavaScript

$(function() {

  $('select').each(function() {
    styleSelectMenu($(this));
  });

});

// 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",
      'tabindex': '1'
    }).css({
      width: selectWidth
    }).focus(function() {
      $(this).find('.select-styled').click()
    }).blur(function() {
      $(this).find('.select-styled').removeClass('active').next('ul.select-options').hide()
    });
    $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 = $list.children('li');

  // This is the event when someone opens the list
  $styledSelect.unbind('click')
  $styledSelect.click(function(e) {
    e.stopPropagation();
    $('div.select-styled.active').each(function() {
     ...