JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://remy.bach.me.uk/superlabels_demo/scripts/jquery.easing.1.3.js"></script>
    <div id="wrapper" class="container_16">
        <form action="" class="grid_4 push_4">
            <ul>
                <li>
                    <label for="text-input">お名前</label>
                    <input type="text" name="text-input" value="" />
                </li>
                <li>
                    <label for="mail-input">[email protected]</label>
                    <input type="email" name="mail-input" value="" />
                </li>
                <li>
                    <label for="ps-input">パスワード</label>
                    <input type="password" name="ps-input" value="" />
                </li>
                <li>
                    <label for="textarea">メッセージ</label>
                    <textarea rows="2" cols="20" name="textarea"></textarea>
                </li>
            </ul>
        </form>
    </div>

CSS

body { font-family:Helvetica,Arial,Sans-serif; font-size:14px; }
#wrapper { margin:50px; }

form ul li { position:relative; width:410px; }
form input, form textarea { width:300px; display:inline-block;margin:0 0 15px 0;padding:5px;}
form select { width:408px; }

JavaScript

/*
 *    Title: jQuery Super Labels Plugin - Give your forms a helping of awesome!
 *    Author: Rﾃｩmy Bach
 *    Version: 1.0
 *    License: http://remybach.mit-license.org
 *    Url: http://github.com/remybach/jQuery.superLabels
 *    Description:
 *    This plugin allows you to display your form labels on top of your form fields, saving you space on your page.
 */
(function($) {
    var defaults = {
        baseZindex:0, // The base z-index which we display on top of.
        debug:false,
        duration:500, // Time of the slide in milliseconds.
        easingIn:($.easing.def ? 'easeInOutCubic' : false), // The easing in function to use for the slide.
        easingOut:($.easing.def ? 'easeInOutCubic' : false), // The easing out function to use for the slide.
        fadeDuration:250, // Duration of animation when it's fade only.
        labelLeft:0, // The distance from the left for the label.
        labelTop:0, // The distance from the top for the label.
        opacity:0.5, // The opacity to fade the label to.
        slide:true, // Whether or not to slide the label across the input field.
        wrapSelector:false // The selector for the element you have wrapping each field.
    };

    var acceptedInputTypes = ['text', 'search', 'url', 'tel', 'email', 'password'];
    var acceptedElements = ['input', 'textarea', 'select'];

    $.fn.superLabels = function(options) {
        // If this has been run on an empty set of elements, pop out.
        if (this.length === 0) return false;
        
        // If options were passed in, merge them with the defaults.
        $.extend(defaults, options || {});
        if (!$.easing.def) { _info('Easing plugin not found - using standard jQuery animations.'); }

        var _fields = this;

        // Check for whether the user has just passed in the form. If so, we need to fetch all the accepted fields, etc..
        if (this.length === 1 && this[0].tagName.match(/form/i)) {
            _fields =...