JSFiddle - React, Tailwind, and code Playground

by geortravel

HTML

<form action="">
      <!-- Details -->
    <div class="form-group">
         <h2 class="heading">Flight Details</h2>

        <div class="grid">
            <div class="col-1-4 col-1-4-sm">
                <div class="controls">
                    <input type="date" id="arrive" class="floatLabel" name="arrive" value="<?php echo date('Y-m-d'); ?>">
                    <label for="arrive" class="label-date"><i class="fa fa-calendar"></i>&nbsp;&nbsp;Arrive</label>
                </div>
            </div>
            <div class="col-1-4 col-1-4-sm">
                <div class="controls">
                    <input type="date" id="depart" class="floatLabel" name="depart" value="<?php echo date('Y-m-d'); ?>" />
                    <label for="depart" class="label-date"><i class="fa fa-calendar"></i>&nbsp;&nbsp;Depart</label>
                </div>
            </div>
        </div>
        <div class="grid">
            <div class="col-1-3 col-1-3-sm">
                <div class="controls"> <i class="fa fa-sort"></i>

                    <select class="floatLabel">
                        <option value="blank"></option>
                        <option value="1">1</option>
                        <option value="2" selected>2</option>
                        <option value="3">3</option>
                    </select>
                    <label for="fruit"><i class="fa fa-male"></i>&nbsp;&nbsp;People</label>
                </div>
            </div>
            <div class="col-1-3 col-1-3-sm">
                <div class="controls"> <i class="fa fa-sort"></i>

                    <select class="floatLabel">
                        <option value="blank"></option>
                        <option value="deluxe" selected>With Bathroom</option>
                        <option value="Zuri-zimmer">Without Bathroom</option>
                    </select>
                    <label for="fruit">Room</label>
                </div>
            </div>
            <div class="col-1-3...

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
html {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}
q, blockquote {
    quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
    content:"";
    content: none;
}
a img {
    border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
    display: block;
}
/* Colors */

/* ---------------------------------------- */
 * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    text-align: center;
    font-family:'Lato', 'sans-serif';
    font-weight: 400;
}
a {
    text-decoration: none;
}
.info-text {
    text-align: left;
    width: 100%;
}
header, form {
    padding: 4em 10%;
}
.form-group {
    margin-bottom: 20px;
}
h2.heading {
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 300;
    text-align: left;
    color: #506982;
    border-bottom: 1px solid #506982;
    padding-bottom: 3px;
    margin-bottom: 20px;
}
.controls {
    text-align: left;
    position: relative;
}
.controls input[type="text"], .controls input[type="email"], .controls input[type="number"], .controls input[type="date"], .controls input[type="tel"], .controls textarea,...

JavaScript

(function ($) {
    function floatLabel(inputType) {
        $(inputType).each(function () {
            var $this = $(this);
            // on focus add cladd active to label
            $this.focus(function () {
                $this.next().addClass("active");
            });
            //on blur check field and remove class if needed
            $this.blur(function () {
                if ($this.val() === '' || $this.val() === 'blank') {
                    $this.next().removeClass();
                }
            });
        });
    }
    // just add a class of "floatLabel to the input field!"
    floatLabel(".floatLabel");
})(jQuery);