JSFiddle - React, Tailwind, and code Playground

by aswinkumar863

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;">
  <label for="select-country">Confirm your country</label>
  <!--   <select id="heard" required="" class="form-control" > -->
  <select class="form-control selectpicker show-tick pull-right" data-parsley-required data-parsley-group="size" id="ddlsize" data-parsley-errors-container="#ddlsizeError" data-parsley-error-message="* required"  data-parsley-min="0">
                            <option value="-1">Select</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                        </select>
  <div id="errors"></div>
  <input type="submit" class="btn btn-default" value="validate">

</form>

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'
});