JSFiddle - React, Tailwind, and code Playground

HTML

<div id="center">
    <form action="#" method="post" accept-charset="utf-8">
        <input type="text" name="username" value="username">
        <hr />
        <input type="password" name="password" value="password">
        <input type="submit" name="submit" value=">">
    </form>
    <span>username: admin pass: 12345</span>
</div>


<script src="http://plugins.jquery.com/files/jquery.animate-colors-min.js_.txt" type="text/javascript"></script>

CSS

body {
    background-color:#34383d;
}
#center{   
    position:relative; 
    width:300px;
    margin:50px auto;
}
form {   
    position:relative;
    width:300px;
    height:100px;
    background-color:#1c1e21;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}
input[type="submit"] {
     position:absolute;
     left:275px;
     top:25px;
     width:50px;
     height:50px;
     background: #1c1e21;    
     border: 5px solid #34383d;
     border-radius: 25px;
     -moz-border-radius: 25px;
     -webkit-border-radius: 25px;
     color:#4f5561;
}
form input[type="text"],form input[type="password"] { 
    width:90%;
    height:40px;
    color:#4f5561;
    background: #1c1e21;
    font-size: 11px;
    margin:4px 15px;
    border: 0px;
}
form input[type="text"]:focus,form input[type="password"]:focus { 
    outline: 0 none;
}
hr {
    margin:0px 15px 0px 15px;
    border: 1px #34383d solid;
}
p{
    width:0px;
    height:20px;
    padding:0px;
    margin:80px auto;
     border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    color:#1c1e21;
    background-color:#1c1e21;
    text-align:center;
    display:block;
}

span{
    color:#d2dfe0;
    text-align:center;
    width:100%;
    display:block;
    margin:150px 0px 0px 0px;
}

JavaScript

var input = $("input:text");
input.focus(function() {
    value=$(this).val();
    $(this).val("");
});
input.blur(function() {
    if($(this).val()=="") {
        $(this).val(value);
    }
});

var pass = $("input:password");
pass.focus(function() {
    pass_value=$(this).val();    
    $(this).val("");
});
pass.blur(function() {
    if($(this).val()=="") {
        $(this).val(pass_value);
    }
});

$("form").submit(function() {
    if(!(($("input:text").val()=="admin") && ($("input:password").val()=="12345"))){
        $("form").vibrate('x', 10, 5, 40);
    }
    else
    {
        $("span").hide();
        $("form").css("margin","auto");    
        $("input:submit").animate({left: '-=150'}, 700 , function(){
            $("input:submit").animate({left: '-=150'},700);
            $("form").animate({width: '0px'}, 700 , function(){
                $("input:submit").hide();
                $("form").hide();
                $("form").before('<p></p>');
                $("p").animate({
                    width: '200px',
                    padding: '10px'
                },700,function(){
                    $("p").text("Login succesfull");
                    $("p").animate({color: '#d2dfe0'}, 700);
                });
            });
        });
    }    
    return false;
});


jQuery.fn.vibrate = function(axis, distance, repetition, duration) { var i = 0; var o = distance / distance; switch(axis) { case 'x': while(i < repetition) { $(this).animate({marginLeft:'-'+distance+'px'}, duration); $(this).animate({marginLeft:distance}, duration); i++; if(i == repetition) { $(this).animate({marginLeft:o}, duration);
} } break; case 'y': while(i < repetition) { $(this).animate({marginTop:'-'+distance+'px'}, duration); $(this).animate({marginTop:distance}, duration); i++; } break; } };
(function( $ ){ $.fn.initialValue = function(value) { if (value) { return this.attr('initial-value', value); } else { return this.attr('initial-value'); } };$.fn.clearInput = function()...