JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="form-horizontal">
        <div class="form-title">
            	<h1>Float Title Input</h1>

        </div>
        <div class="form-content">
            <div class="form-item">
                <div class="item-tip">Name</div>
                <input class="form-input" type="text" name="name">
            </div>
            <div class="form-item">
                <div class="item-tip">AGE</div>
                <input class="form-input" type="text" name="age">
            </div>
            <div class="form-item">
                <div class="item-tip">Gender</div>
                <input class="form-input" type="text" name="sex">
            </div>
        </div>
    </div>
</div>

CSS

body {
    font-family:"ff-tisa-web-pro-1", "ff-tisa-web-pro-2", "Lucida Grande", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Hiragino Sans GB W3", "WenQuanYi Micro Hei", sans-serif;
}
.container {
    margin: 0 auto;
    width: 480px;
}
.form-horizontal {
    margin-top: 50px;
    border: 1px solid #ccc;
    border-radius: 3px;
}
.form-horizontal .form-title {
    border-bottom: 1px solid #ccc;
    padding: 0px 15px;
    color: #333;
}
.form-horizontal .form-content {
    padding: 15px;
}
.form-item {
    width: 100%;
    margin: 15px auto;
    position: relative;
}
.form-input {
    display: block;
    border-radius: 10px;
    width: 100%;
    height: 46px;
    font-size: 14px;
    line-height: 1.428571429;
    box-sizing:border-box;
    vertical-align: middle;
    padding: 9px 12px;
    border: 1px solid #ccc;
    -webkit-transition: border-color ease-in-out .15s;
    transition: border-color ease-in-out .15s;
}
.form-input:focus {
    border-color: #66afe9;
    outline: 0;
}
.item-tip {
    position: absolute;
    color: #ccc;
    top: 9px;
    left: 12px;
    transition: all linear .2s;
    background-color: #fff;
    padding: 0px 3px;
}
.item-tip-focus {
    top: -8px;
    font-size: 12px;
    color: #66afe9;
}

JavaScript

$(".form-input").on("focus", function (e) {
    var $this = $(this);
    var $tip = $this.prev();

    $tip.addClass("item-tip-focus");
    $tip.css("color", "#66afe9");
});
$(".form-input").on("blur", function (e) {
    var $this = $(this);
    var $tip = $this.prev();

    if ($this.val().trim() === "") {
        $tip.removeClass("item-tip-focus");
    }
    $tip.css("color", "#ccc");
});