JSFiddle - React, Tailwind, and code Playground

by sbaydakov

HTML

<div class="box">
<h3>HERE COMES</h3>
</div>

<button id="btn">Press</button>

CSS

.box { display: block; background: #e0e0e0; }
.box h3 { font-weight: bold; padding: 10px; -webkit-animation: heading 4s ease; -moz-animation: heading 4s ease; }

@-webkit-keyframes heading {
    0% { opacity: 0; -webkit-transform: translate(200px,0); }
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes heading {
    0% { opacity: 0; -moz-transform: translate(200px,0); }
    100% { opacity: 1; -moz-transform: translateY(0); }
}

JavaScript

$(function() {
    $("#btn").click(function() {
        $(".box").toggle();
    });
});