JSFiddle - React, Tailwind, and code Playground

by ocanal

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.10/css/bootstrap-select.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.1/parsley.min.js"></script>
<form id="adform" data-parsley-validate="" onsubmit="return false;">
  <div class="form-group col-12 col-lg-6">
    <label for="edu">Brand<b class="text-danger">*</b></label>
    <select name="brd" class="form-control selectpicker pull-right border" id="edu" data-size="6" data-parsley-required data-parsley-group="size" data-parsley-errors-container="#ddlsizeError" data-parsley-error-message="Must Select Your Brand" data-parsley-trigger-after-failure="focusout changed.bs.select">
      <option value="" data-display="Select Brand">Select Brand</option>
      <option>Audi</option>
      <option>BMW</option>
      <option>Chevrolet</option>
      <option>Fiat</option>
      <option>Ford</option>
      <option>Hindustan Motors</option>
      <option>Honda</option>
      <option>Hyundai</option>
      <option>Tata</option>
      <option>Mahindra</option>
      <option>Maruti Suzuki</option>
      <option>Mercedes-Benz</option>
      <option>Mitsubishi</option>
      <option>Nissan</option>
      <option>Renault</option>
      <option>Skoda</option>
      <option>Toyota</option>
      <option>Volkswagen</option>
      <option>Other Brands</option>
    </select>
    <div id="ddlsizeError"></div>
  </div>
  <div class="form-group col-12 col-lg-6">
    <label...

CSS

/* On Invalid */
.selectpicker.is-invalid~.dropdown-toggle {
  border-color: #dc3545 !important;
  color: #dc3545 !important;
  outline: none !important;
}

.selectpicker.is-invalid~.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
}

/* On valid */
.selectpicker.is-valid~.dropdown-toggle {
  border-color: #28a745 !important;
  color: #28a745 !important;
  outline: none !important;
}

.selectpicker.is-valid~.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25) !important;
}

JavaScript

$(document).ready(function(e) {
  $('.selectpicker').selectpicker({
    style: 'btn-light border'
  });
});

$('.selectpicker').attr('data-trigger', 'change').attr('data-required', 'true');

$("#adform").parsley({
  errorClass: 'is-invalid text-danger',
  successClass: 'is-valid',
  errorsWrapper: '<div class="input-group"></div>',
  errorTemplate: '<small class="form-text text-danger"></small>',
  trigger: 'change',
  triggerAfterFailure: 'focusout changed.bs.select'
});
var eduBak = {}
eduBak['Audi'] = ['A3', 'A4', 'A6', 'A7', 'A8', 'A8 L', 'A8l', 'Q3', 'Q5', 'Q7', 'R8', 'Rs 5', 'Rs 7', 'S6', 'Tt', 'other'];
eduBak['BMW'] = ['1 Series', '3 Series', '5 Series', '5 Series Gt', '6 Series', '7 Series', 'Gran Turismo', 'M3', 'M5', 'X5 M', 'M6', 'X6 M', 'Mini', 'X1', 'X3', 'X5', 'X6', 'Z4', 'other'];
eduBak['Hindustan Motors'] = ['Ambassador', 'Contessa', 'other'];
$('#edu').on('change', function() {
  var model = $("#edct");
  var educ = $(this).val();
  var ed = eduBak[educ];
  if (ed) {
    model.html('<option value="" data-display="Select Model">Select Model</option>');
    for (var i = 0; i < ed.length; i++) {
      model.append(new Option(ed[i], ed[i]));
    }
  }
  $('#edct').selectpicker('refresh');
});