JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="mc-signup-form">
    <label for="input-email"><input type="email" class="mc-email" placeholder="Email"/></label>
    <button class="mc-submit">Submit</button>
</div>

SCSS

@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,800);

body{
    font-family: 'Raleway', sans-serif;
}

*{
    box-sizing: border-box;
}

#mc-signup-form{
    max-width: 400px;
    margin: 20px auto;
    display: flex;
    align-items: stretch;
    justify-content: center;
    
    &,
    input{
        font-family: 'Raleway', sans-serif;
    }
    
    *:focus{
        outline: none;
    }
    
    label{
        flex: 1;
        display: block;
        position: relative;
        transition: max-width 500ms;
        transition-delay: 750ms;
        overflow: hidden;
        max-width: 100%;
        
        & > input{
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
            padding: 5px 10px;
            font-size: 20px;
            font-weight: 300;
            background-color: #fff;
            transition: background-color 500ms;
            border: 1px solid #aaa;
            border-right: 0;
        }
        
    }
    
    button{
        width: 60px;
        padding: 0;
        display: block;
        background-color: #00C6EA;
        border: 0;
        position: relative;
        font-size: 0;
        color: rgba(0, 0, 0, 0);
        transition: background-color 500ms;
        cursor: pointer;
        
        &:before{
            content: '';
            display: block;
            padding-top: 100%;
        }
        
        &:after{
            content: '\f0e0';
            font-family: 'FontAwesome';
            font-weight: normal;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            font-size: 28px;
            color: #fff;
        }
        
    }
    
    &.success{
        
        label{
            max-width: 0;
        }
        
        button{
            background-color: #46dd7b;
            cursor: default;
            
           ...

JavaScript

/**
 * MC form status
 */
var mcForm = mcForm || {};

mcForm.init = function(){
    mcForm.elem = document.getElementById('mc-signup-form');
    if(!mcForm.elem){ return false; }
    mcForm.processing = false;
    mcForm.elemInput  = mcForm.elem.querySelectorAll('input.mc-email')[0];
    mcForm.elemSubmit = mcForm.elem.querySelectorAll('button.mc-submit')[0];
    mcForm.bindEvents();
}

mcForm.bindEvents = function(){
    mcForm.elemInput.addEventListener('keyup', function(e){
        if(mcForm.processing){ return false; }
    	var c = e.charCode || e.keyCode;
    	if(c === 13){
            // Process
            mcForm.process.init();
        }
    });
    mcForm.elemSubmit.addEventListener('click', function(e){
        e.preventDefault();
        if(mcForm.processing){ return false; }
        // Process
        mcForm.process.init();
    });
}

mcForm.setStatus = function(status){
    mcForm.elem.className = '';
    mcForm.elem.className = status;
    mcForm.elemInput.removeAttribute('disabled');
    if(status.match(/\bprocessing\b/i)){
        mcForm.processing = true;
        mcForm.elemInput.setAttribute('disabled', true);
    }else{
        mcForm.processing = false;
    }
}

mcForm.process = {};

mcForm.process.init = function(){
    mcForm.setStatus('processing');
    var v = mcForm.process.validateEmail(mcForm.elemInput.value);
    if(!v){
    	mcForm.setStatus('error');
        return false;
    }
    setTimeout(function(){
        mcForm.setStatus('processing success');
    }, 2000);
}

mcForm.process.validateEmail = function(input){
    input = input.trim();
    if(input.match(/^[a-zA-Z0-9]+(?:(\.|_)[A-Za-z0-9!#$%&'*+/=?^`{|}~-]+)*@(?!([a-zA-Z0-9]*\.[a-zA-Z0-9]*\.[a-zA-Z0-9]*\.))(?:[A-Za-z0-9](?:[a-zA-Z0-9-]*[A-Za-z0-9])?\.)+[a-zA-Z0-9](?:[a-zA-Z0-9-]*[a-zA-Z0-9])?$/i)){
        return input;
    }
    return false;
}

mcForm.init();