JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jackrugile.com/jrumble/js/jrumble.1.1.min.js"></script>
<div class='contenu_holder' >
        <div class='contenu'>
            <div id='stylized' class='myform'>
                <form id='form' name='form' method='post' action='#'>
                    <h1>Formulaire d'authentification</h1>
                    <p>Veuillez vous authentifier pour acceder aux differents options d'administration</p>
                    
                    <label>Login
                    <span class='small'>Saisissez votre login</span>
                    </label>
                    <input type='text' name='name' id='login' />
                    
                    <label>Password
                    <span class='small'>Min. 6 caracteres</span>
                    </label>
                    <input type='text' name='password' id='password' />
                    
                    <button type='button' class="test">S'authentifier</button>
                    <div class='spacer'></div>
                
                </form>
            </div>
        </div>
    </div>

CSS

/********************** RESET MAYER *************************************/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {    margin: 0;    padding: 0;    border: 0;    font-size: 100%;    font: inherit;    vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {    display: block;}body {    line-height: 1;}ol, ul {    list-style: none;}blockquote, q {    quotes: none;}blockquote:before, blockquote:after,q:before, q:after {    content: '';    content: none;}table {    border-collapse: collapse;    border-spacing: 0;}
/***************************************************************************/

/******************** ADMINISTRATION : PAGE AUTHENTIFICATION ************************/

body{
    font-family:'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}

/* ----------- stylized ----------- */
.contenu{ margin-top:10%; } 
#stylized
{
    border:solid 2px #b7ddf2;
    background:#ebf4fb;
}
    #stylized h1 
    {
        font-size:18px;
        margin-bottom:8px;
    }
    #stylized p
        {
        font-size:11px;
        color:#666666;
        margin-bottom:20px;
        border-bottom:solid 1px #b7ddf2;
        padding-bottom:10px;
    }
    #stylized label{
        display:block;
        text-align:right;
...

JavaScript

$(document).ready(function(){   
    
    /*$(".test").click(function(){
        
        $(this).trigger('stopRumble');
    });*/
        
    
    $("#stylized").jrumble();
    var demoTimeout;
    $('.test').click(function(){
        $this = $("#stylized");
        clearTimeout(demoTimeout);
        $this.trigger('startRumble');
        demoTimeout = setTimeout(function(){$this.trigger('stopRumble');}, 1500)
    });
      
});