JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<form action=""> <span class="field">
       <input type="text" id="fname1" name="fname1" placeholder="First Name" />
    </span>
 <span class="field">
       <input type="text" id="fname2" name="fname2" placeholder="First Name2" />
    </span>
 <span class="field">
       <input type="text" id="fname3" name="fname3" placeholder="First Name3" />
    </span>

</form>

SCSS

.field {
    display: block;
    position:relative;
    height: 40px;
    input[type="text"] {
        position: absolute;
        z-index:2;
        background: transparent;
        border: 1px solid darkgrey;
    }
    .labelder {
      display: none;
      position: absolute;
      z-index: 3;
      color: green;
      font-size: 16px;
    }
    input[type="text"]:focus ~ .labelder {
      display: block;
    }
}

JavaScript

(function (factory) {
    'use strict';
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module depending on jQuery.
        define(['jquery'], function (jQuery) {
            return factory(jQuery);
        });
    } else {
        // No AMD. Register plugin with global jQuery object.
        factory(jQuery);
    }
}(function ($) {
    'use strict';
    /**
     * @module jquery-plugin
     * @return {jQuery}
     */
    var pluginName = 'labelder',
        defaults = {
            /**
             * character length for user name in email
             *
             * @property nameLength
             * @type number
             */
            labelderClasses: ['js-labelder', 'labelder']
        };

    /**
     * __Labelder-Plugin__
     *
     * @class Labelder
     * @constructor
     * @param element {Object} element from selection
     * @param options {Object} plugin options
     * @chainable
     */
    function Labelder(element, options) {
        var that = this;

        that.element = element;
        that.options = $.extend({}, defaults, options);

        that._defaults = defaults;
        that._name = pluginName;

        that.init();
    }

    Labelder.prototype = {
        /**
         * Init labelder
         *
         * @method init
         */
        init: function () {
            var that = this,
                element = that.element,
                options = that.options;

            //add event handling for the inputs
            that.handleEvents(element, options);

        },
        /**
         * event handling
         *
         * @method handleEvents
         */
        handleEvents: function (element, options) {
            console.log(element)
            $(element)
                .on('input.labelder propertychange.labelder focusin.labelder', 'input[type="text"]', function (event) {
                var that = this,
                    $this = $(that),
                   ...