JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="butterfly">
    <div class="butter1">
        <div class="butterfly1"><img src="http://www.w3cplus.com/sites/default/files/butterfly1.png" /></div>
    </div>
    <div class="butter2">
        <div class="butterfly2"><img src="http://www.w3cplus.com/sites/default/files/butterfly2.png" /></div>
    </div>
    <div class="butter3">
        <div class="butterfly3"><img src="http://www.w3cplus.com/sites/default/files/butterfly3.png" /></div>
    </div>
</div>

CSS

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, em { margin: 0; padding: 0; }
body { font-size: 12px; line-height: 1.5; font-family: Verdana, Simsun; color:#333; }
img, fieldset { border: 0; }
a { color: #0053aa; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-family:Simsun, sans-serif; }

.butterfly { width: 980px; height: 200px; margin: 0 auto; overflow: hidden; background: #EAF7FD url("http://www.w3cplus.com/sites/default/files/bg_footer.jpg") no-repeat left bottom;}
.butter1, .butter2, .butter3 {
    position: relative;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    display: none\9; *display: none;
}
.butter1 { -webkit-animation-name: butter1; -webkit-animation-duration: 30s; -webkit-transform: rotateZ(-30deg); }
.butter2 { -webkit-animation-name: butter2; -webkit-animation-duration: 40s; -webkit-transform: rotateZ(-30deg); }
.butter3 { -webkit-animation-name: butter3; -webkit-animation-duration: 50s; -webkit-transform: rotateZ(30deg); }
.butterfly1, .butterfly2, .butterfly3 {
    position: absolute;
    -webkit-animation-name: x-spin;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-linear;
}
.butterfly1 { height: 36px; left: 40px; bottom: 60px; -webkit-animation-duration: 0.4s; }
.butterfly2 { height: 40px; left: 80px; bottom: 10px; -webkit-animation-duration: 0.4s; }
.butterfly3 { height: 40px; right: 60px; bottom: 10px; -webkit-animation-duration: 0.32s; }

@-webkit-keyframes x-spin {
    0%        { -webkit-transform: rotateX(0deg); }
    20%        { -webkit-transform: rotateX(80deg); }
    40%        { -webkit-transform: rotateX(130deg); }
    50%        { -webkit-transform: rotateX(180deg); }
    60%        { -webkit-transform: rotateX(210deg); }
    80%        { -webkit-transform: rotateX(270deg); }
    100%    {...