JSFiddle - React, Tailwind, and code Playground

by SebAshton

HTML

<div class="poncy-label-animation">
    <input type="text" />
    <label>This is silly</label>
</div>

SCSS

body {
    background: lightblue;
    padding: 40px;
}

.poncy-label-animation {
    background: white;
    position: relative;
    width: 200px;
}

input {
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
    display: block;
    height: 40px;
    outline: none;
    text-align: center;
    position: relative;
    z-index: 4;
    width: 200px;
}

label {
    text-align: left;
    display: block;
    position: absolute;
    height: 16px;
    font-size: 16px;
    top: 50%;
    margin-top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    transition: top .2s linear, left .2s linear, margin-top .2s linear, height .2s linear, font-size .2s linear, transform .2s linear;
}

input:focus + label,
input.has-value + label{
    top: 8px;
    left: 5px;
    height: 8px;
    margin-top: -4px;
    font-size: 8px;
    transform: translateX(0) rotate(360deg);
}

CoffeeScript

$('input').keydown ->
    if $(@).val()
        $(@).addClass('has-value')
    else
        $(@).removeClass('has-value')
        
$('input').blur ->
    if $(@).val()
        $(@).addClass('has-value')
    else
        $(@).removeClass('has-value')