JSFiddle - React, Tailwind, and code Playground

by kachibito

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

/********** Tooltip Styling **********/
.sl_tt {
    background:#FFF;
    border:1px solid #777;
    padding:5px 5px 5px 10px;
    position:absolute;
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.15), 0 1px 0 rgba(255, 255, 255, 0.8);
    width:290px;

    /* background-gradient */
    background: -moz-linear-gradient(100% 100% 90deg, #EEE, #FFF);
    background: -webkit-gradient(linear, left top, right top, from(#EEE), to(#FFF));

    /* border-radius */
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;

    /* box-shadow */
    -moz-box-shadow:0 0 3px #777;
    -webkit-box-shadow:0 0 3px #777;
    box-shadow:0 0 3px #777;
}
.sl_tt dd { font-size:12px; font-style:italic; margin-top:5px; }

/* Tooltip at the bottom */
.sl_tt_bottom { left:0; }
.sl_tt_bottom:before {
    border:8px solid;
    border-color:transparent transparent #777 transparent;
    content:' ';
    height:0;
    left:2px;
    position:absolute;
    top:-16px;
    width:0;
}
.sl_tt_bottom:after {
    border:7px solid;
    border-color:transparent transparent #FFF transparent;
    content:' ';
    height:0;
    left:3px;
    position:absolute;
    top:-14px;
    width:0;
}

/* Tooltip on the left */
.sl_tt_left { text-align:right; top:0; }
.sl_tt_left:before {
    border:8px solid;
    border-color:transparent transparent transparent #777;
    content:' ';
    height:0;
    right:-16px;
    position:absolute;
    top:2px;
    width:0;
}
.sl_tt_left:after {
    border:7px solid;
    border-color:transparent transparent transparent #FFF;
    content:' ';
    height:0;
    right:-14px;
    position:absolute;
    top:3px;
    width:0;
}

/* Tooltip on the right */
.sl_tt_right { top:0; }
.sl_tt_right:before {
   ...

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 =...