JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div id="test">test</div>

CSS

@-webkit-keyframes bounce {
        0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
        40% {-webkit-transform: translateY(-30px);}
        60% {-webkit-transform: translateY(-15px);}
    }

    @-moz-keyframes bounce {
        0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
        40% {-moz-transform: translateY(-30px);}
        60% {-moz-transform: translateY(-15px);}
    }

    @-ms-keyframes bounce {
        0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);}
        40% {-ms-transform: translateY(-30px);}
        60% {-ms-transform: translateY(-15px);}
    }

    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
        40% {transform: translateY(-30px);}
        60% {transform: translateY(-15px);}
    }

    
    
    #test {
        text-align: center;
        background: #39c;
        padding: 10px;
        width: 180px;
        color: #fff;
        margin: 0 auto;
        text-shadow: 0 1px 0 rgba(0,0,0,.3);
        background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
        background-image: -moz-linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
        background-image: linear-gradient(-45deg, rgba(255,255,255,0), rgba(255,255,255,.1) 60%, rgba(255,255,255,0) 60%);
        border-radius: 5px;
        border: 1px solid #17a;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
        font-weight: bold;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
        backface-visibility: hidden;

        -webkit-animation-duration: 1s;
        -webkit-animation-delay: .2s;
        -webkit-animation-timing-function: ease;
        -webkit-animation-fill-mode: both;
        
        -moz-animation-duration: 1s;
        -moz-animation-delay: .2s;
        -moz-animation-timing-function: ease;
       ...

JavaScript

$(function(){
            $('#test').hover(function(){
                $(this).addClass('bounce');
            },function(){
                $(this).removeClass('bounce');
            });
        });