JSFiddle - React, Tailwind, and code Playground

by george_black

HTML

<!--<div id="animation" class="rotate animated_30 infinite ">
    <div title="Google" class="google_logo " style=""></div>
</div><br/>-->

<div title="Google" id="animation2" class="google_logo bounce animated infinite " style=""></div>
<!-- <div title="Google" align="left" id="round-with-bg" class="roundbg" style=""></div>

<a href="#">
    <div title="Google" align="left" id="just-round" class="round" style="">
        <img src="http://google.com/images/srpr/logo11w.png"/>
    </div>
</a>-->
<br/><br/><br/>
<div class="rounded-corners" id="rounded-corners" style="">
    <div id="imageClipped" class="imageClipFP ">
        <img class="img" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/HD-landscape-pictures.png" />
    </div>
</div>

CSS

@keyframes rotate {
    50% {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter:"FlipH";
    }
    100% {
        -moz-transform: scaleX(1);
        -o-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        filter: FlipH;
        -ms-filter:"FlipH";
    }
}
@-webkit-keyframes rotate {
    50% {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter:"FlipH";
    }
    100% {
        -moz-transform: scaleX(1);
        -o-transform: scaleX(1);
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        filter: FlipH;
        -ms-filter:"FlipH";
    }
}
.rotate {
    -webkit-animation-name: rotate;
    animation-name: rotate;
}
@-webkit-keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%, 43% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, 30px, 0);
        transform: translate3d(0, 30px, 0);
    }
    70% {
        -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
        -webkit-transform: translate3d(0, 15px, 0);
        transform: translate3d(0, 15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, 4px, 0);
        transform: translate3d(0, 4px, 0);
    }
}
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
       ...