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;
        }
        
        .butter {position: relative;}
        #butter1 {bottom: -215px;left: 5px;        }
        #butter2 {bottom: -210px;left: 50px;}
        #butter3 {bottom: -220px;left: 840px;}        
        .butterFly {position: absolute;}
        .butterFly1 { height: 36px; left: 40px; bottom: 60px; }
        .butterFly2 { height: 40px; left: 80px; bottom: 10px; }
        .butterFly3 { height: 40px; left: 60px; bottom: 10px; }