JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div id="butterfly">
            <div id="butter1" class="butter">
                <div class="butterFly1 butterFly"><img src="http://www.w3cplus.com/sites/default/files/butterfly1.png" alt="" /></div>
            </div>
            <div id="butter2" class="butter">
                <div class="butterFly2 butterFly"><img src="http://www.w3cplus.com/sites/default/files/butterfly2.png" alt="" /></div>
            </div>
            <div id="butter3" class="butter">
                <div class="butterFly3 butterFly"><img src="http://www.w3cplus.com/sites/default/files/butterfly3.png" alt="" /></div>
            </div>
        </div>

CSS

*{
            margin: 0;
            padding: 0;
        }
        
        body { 
            font: 12px/1.5 Verdana, Simsun; 
            color:#333;
            background-color: #EAF7FD;
        }
        #butterfly {
            background: #EAF7FD url("http://www.w3cplus.com/sites/default/files/bg_footer.jpg") no-repeat left bottom;
            width: 947px;
            height: 200px;
            margin: 0 auto;
            overflow: hidden;
        }
        
        @-moz-keyframes butter1 {
            0%        { opacity: 0; }
            10%        { left: 160px; bottom: -135px; opacity: 1; }
            20%        { left: 240px; bottom: -170px; }
            30%        { left: 400px; bottom: -200px; }
            60%        { left: 720px; bottom: -220px; }
            70%        { left: 800px; bottom: -185px; }
            80%        { left: 840px; bottom: -215px; opacity: 0.6; }
            100%    { left: 900px; bottom: -170px; opacity: 0; }
        }
        
        @-webkit-keyframes butter1 {
            0%        { opacity: 0; }
            10%        { left: 160px; bottom: -135px; opacity: 1; }
            20%        { left: 240px; bottom: -170px; }
            30%        { left: 400px; bottom: -200px; }
            60%        { left: 720px; bottom: -220px; }
            70%        { left: 800px; bottom: -185px; }
            80%        { left: 840px; bottom: -215px; opacity: 0.6; }
            100%    { left: 900px; bottom: -170px; opacity: 0; }
        }
        
        @-moz-keyframes butter2 {
            0%        { opacity: 0; }
            10%        { left: 120px; bottom: -170px; opacity: 1; }
            40%        { left: 180px; bottom: -190px; }
            50%        { left: 360px; bottom: -210px; }
            60%        { left: 600px; bottom: -220px; }
            80%        { left: 640px; bottom: -190px; opacity: 0.6; }
            100%    { left: 860px; bottom: -180px; opacity: 0; }
        }
        
       ...