JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div class="row">
        <div class="input-group">
            <input id="user_first_name" name="user[first_name]" required />
            <label for="user_first_name">First Name</label>
        </div>
        <div class="input-group">
            <input id="user_last_name" name="user[last_name]" required />
            <label for="user_last_name">Last Name</label>
        </div>
    </div>
    <div class="row">
        <div class="input-group double">
            <input id="user_email" name="user[email]" required />
            <label for="user_email">Email Address</label>
        </div>
    </div>
</form>

SCSS

form {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 200;
    font-size: 18px;
}
.row {
}
.input-group {
    position: relative;
    margin-bottom: 8px;
    float: left;
    margin-right: 5px;
    label {
        position: absolute;
        font-weight: 200;
        color: #CCC;
        z-index: 10;
        top: 14px;
        left: 8px;
    }
    &.double input {
        width: 378px;
    }
    input {
        width: 180px;
        margin-top: 10px;
        position: relative;
        z-index: 100;
        font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 18px;
        padding: 2px 6px;
        font-weight: 200;
        border: 0;
        border-bottom: 1px solid #CCC;
        outline: none;
        background: none;
        &:valid + label {
            top: -2px;
            left: 6px;
            font-size: 10px;
            font-weight: bold;
        }
        &:focus + label {
            color: #3366ff;
            top: -2px;
            left: 6px;
            font-size: 10px;
            font-weight: bold;
            transition-property: top;
            transition-duration: 1s;
            transition-timing-function: ease-out-quart;
        }
    }
}