JSFiddle - React, Tailwind, and code Playground

by 2Yootz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<button id="btnShow">
  Show Modal
</button>


<div class="modal fade" tabindex="-1" role="dialog" id="modalChangeAddress">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Change Address</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">


        <form id="frmChangeAddress">
          <div class="form-group">
            <label for="txtName">Name</label>
            <input type="text" class="form-control" id="txtName" placeholder="Name" required />
          </div>

          <div class="form-group">
            <label for="lstCountry">Country</label>
            <select id="lstCountry" class="form-control">
              <option value="US">United States</option>
              <option value="CA">Canada</option>
            </select>
          </div>
          <div class="form-group">
            <label for="txtStreet1">Street Address</label>
            <input type="text" class="form-control" id="txtStreet1" placeholder="Street Address" required />
          </div>
          <div class="form-group">
            <label for="txtStreet2" class="srr-only">Street 2</label>
            <input type="text" class="form-control" id="txtStreet2" placeholder="Apt., Floor, Unit, etc. (optional)" />
          </div>
          <div class="form-group">
            <label for="txtCity">City</label>
            <input type="text" class="form-control" id="txtCity" placeholder="City" required />
          </div>
          <div class="form-group">
            <label for="txtStateProvince">State/Province</label>
            <input type="text" class="form-control"...

CSS

/*!
 * Float Labels
 *
 * @version: 3.3.2
 * @author: Paul Ryley (http://geminilabs.io)
 * @url: https://geminilabs.github.io/float-labels.js
 * @license: MIT
 */

.fl-form .fl-wrap,
[class*=" icon-"]:before,
[class^=icon-]:before {
  position: relative;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased
}

.fl-form .fl-wrap {
  text-rendering: optimizeLegibility
}

.fl-form input.fl-input,
.fl-form select.fl-select,
.fl-form textarea.fl-textarea {
  width: 100%;
  outline: 0;
  font-size: 16px;
  line-height: 1.5;
  border-radius: 3px;
  border: 1px solid #dfdfdf;
  background-color: #fff;
  box-sizing: border-box;
  transition: all .2s ease-in-out;
  margin-bottom: 1.4375rem
}

.fl-form input.fl-input:-moz-placeholder,
.fl-form input.fl-input::-moz-placeholder,
.fl-form select.fl-select:-moz-placeholder,
.fl-form select.fl-select::-moz-placeholder,
.fl-form textarea.fl-textarea:-moz-placeholder,
.fl-form textarea.fl-textarea::-moz-placeholder {
  color: #bbb
}

.fl-form input.fl-input:-ms-input-placeholder,
.fl-form select.fl-select:-ms-input-placeholder,
.fl-form textarea.fl-textarea:-ms-input-placeholder {
  color: #bbb
}

.fl-form input.fl-input::-webkit-input-placeholder,
.fl-form select.fl-select::-webkit-input-placeholder,
.fl-form textarea.fl-textarea::-webkit-input-placeholder {
  color: #bbb
}

.fl-form select.fl-select {
  position: relative;
  color: #bbb;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none
}

.fl-form .fl-is-active input.fl-input,
.fl-form .fl-is-active select.fl-select,
.fl-form .fl-is-active textarea.fl-textarea {
  color: #444;
  background-color: #fff;
  border-color: #dfdfdf
}

.fl-form .fl-has-focus input.fl-input,
.fl-form .fl-has-focus select.fl-select,
.fl-form .fl-has-focus textarea.fl-textarea {
  background-color: #fff;
  border-color: #1976d2
}

.fl-form label.fl-label {
  opacity: 0;
  visibility: hidden;
  display: block;
  position: absolute;
  top: -12px;
  left: 0;
 ...

JavaScript

$("#btnShow").click(function() {
  $("#modalChangeAddress").modal("show");
});


$(document).ready(function() {
  var floatlabels = new FloatLabels('#frmChangeAddress', {
    style: 2, prioritize: "placeholder"
  });



});





/*!
 * Float Labels
 *
 * @version: 3.3.2
 * @author: Paul Ryley (http://geminilabs.io)
 * @url: https://geminilabs.github.io/float-labels.js
 * @license: MIT
 */

/** global: NodeList, Option */

;
(function(window, document, undefined) {
  "use strict";

  var Plugin = function(el, options) {
    this.el = this.isString(el) ? document.querySelectorAll(el) : [el];
    this.config = [];
    this.options = options;
    this.selectors = [];
    this.init();
    this.destroy = function() {
      this.loop(function(el) {
        el.removeEventListener('reset', this.events.reset);
        this.removeClasses(el);
      }, function(field) {
        this.reset(field);
      });
    };
    this.rebuild = function() {
      this.loop(null, function(field) {
        this.floatLabel(field, true);
      });
    };
  };

  Plugin.prototype = {

    defaults: {
      customEvent: null,
      customLabel: null,
      customPlaceholder: null,
      exclude: '.no-label',
      inputRegex: /email|number|password|search|tel|text|url/,
      prefix: 'fl-',
      prioritize: 'label', // label|placeholder
      requiredClass: 'required',
      style: 0, // 0|1|2
      transform: 'input,select,textarea'
    },

    /** @return void */
    init: function() {
      this.initEvents();
      this.loop(function(el, i) {
        var style = this.config[i].style;
        el.addEventListener('reset', this.events.reset);
        el.classList.add(this.prefixed('form'));
        if (style) {
          el.classList.add(this.prefixed('style-' + style));
        }
      }, function(field) {
        this.floatLabel(field);
      });
    },

    /** @return void */
    initEvents: function() {
      this.events = {
        blur: this.onBlur.bind(this),
        change:...