JSFiddle - React, Tailwind, and code Playground

by devangkantharia

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<section class="contact">
    <div id="fifth">
        <div class="row">
            <div class="col-md-12">
                <div class="form animate bounceInUp animated">
                    <fieldset id="contact_form">
                        <div id="result"></div>
                        <input class="animate bounceIn animated" data-delay="500" type="text" name="name" id="name" placeholder="Name">
                        <input class="animate bounceIn animated" data-delay="500" type="email" name="email" id="email" placeholder="Email">
                        <textarea class="animate bounceIn animated" data-delay="500" name="message" id="message" placeholder="Message"></textarea>
                        <label><span>&nbsp;</span>

                            <button class="submit_btn animate swing animated" data-delay="1000" id="submit_btn">Submit</button>
                        </label>
                    </fieldset>
                </div>
            </div>
        </div>

    </div>
</section>

CSS

@charset"UTF-8";
 body {
    /*-webkit-backface-visibility: visible; */
}
.animated {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s;
}
.animated.hinge {
    -webkit-animation-duration: 2s;
    -moz-animation-duration: 2s;
    -o-animation-duration: 2s;
    animation-duration: 2s;
}
@-webkit-keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}
@-moz-keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}
@-o-keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}
@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0;
    }
}
.animated.flash {
    -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -o-animation-name: flash;
    animation-name: flash;
}
@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px);
    }
}
@-moz-keyframes shake {
    0%, 100% {
        -moz-transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -moz-transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -moz-transform: translateX(10px);
    }
}
@-o-keyframes shake {
    0%, 100% {
        -o-transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        -o-transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        -o-transform: translateX(10px);
    }
}
@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}
.animated.shake {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
   ...

JavaScript

/*
***************************
Contact Us Animation Form: 
http://www.yourbot.com/
***************************
*/