JSFiddle - React, Tailwind, and code Playground

by halirgb

HTML

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-12">
          <div class="well box clearfix">
    <h3>Log in Foo!</h3>
    <div class="form-group">
        <input class="form-control" type="text" placeholder="username" />    
    </div>
    <div class="form-group">
        <input class="form-control" type="text" placeholder="password" />
    </div>
    <div class="form-group">
        <input class="btn btn-default test" type="submit" value="Login" />
    </div>
</div>      
        </div>
    </div>
</div>

CSS

.box{
    background-color:#3D9970;
    margin:0 auto;
    width:400px;
    margin:20px auto;
}
h3{
    margin-top:0;
    margin-bottom:30px;
    color:#fff;
}

JavaScript

$('.test').click(function () {
    $('.box').effect( "shake", function(){
        $( ".box" ).animate({
        backgroundColor: "#FF4136",
        });
        $( ".box" ).animate({
            backgroundColor: "#3D9970",
        });
    });
});