JSFiddle - React, Tailwind, and code Playground

by gregguida

HTML

<div class="bird">
    <div class="head"></div>
    <div class="tuft"></div>
    <div class="beak"></div>
    <div class="body"></div>
    <div class="tail"></div>
    <div class="feet">
        <div class="right-leg"></div>  
        <div class="right-leg2"></div> 
        <div class="right-leg3"></div> 
        <div class="right-leg4"></div> 
        <div class="right-leg5"></div>     
        <div class="left-leg"></div>             
        <div class="left-leg2"></div>   
        <div class="left-leg3"></div> 
        <div class="left-leg4"></div> 
        <div class="left-leg5"></div>            
    </div>
</div>

CSS

.bird {
    width:100px;
    height:100px;
    position:relative;
    margin:10px;
}
.head {
    background-color:#20B0C0;
    position:absolute;
    top:5px;
    left:5px;
    width:20px;
    height:18px;
    border-radius:20px/18px;
}
.tuft {
   width: 0;
   height: 0;
   top:0px;
   left:12px;
   position:absolute;
   border-right: 10px solid #20B0C0;
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
   -webkit-transform-origin: 0 100%;
   -webkit-transform:rotate(28deg);
}
.beak {
   width: 0;
   height: 0;
   top:10px;
   left:-2px;
   position:absolute;
   border-right: 10px solid #20B0C0;
   border-top: 5px solid transparent;
   border-bottom: 5px solid transparent;
}

.body {
    width: 35px; 
    height: 20px; 
    background: #20B0C0; 
    position:absolute;
    top:5px;
    left:12px;
    border-radius: 35px / 20px; 
    -webkit-transform-origin: 0 100%;
    -webkit-transform:rotate(25deg);
}
.tail {
    background: #20B0C0;
    position:absolute;
    top:25px;
    left:45px;
    width:20px;
    height:7px;
    -webkit-transform-origin: 0 100%;
    -webkit-transform:rotate(5deg);
}
.right-leg { 
    background: #20B0C0; 
    position:absolute;
    top:33px;
    left:40px;
    height:8px;
    width:2px;
    -webkit-transform-origin: 0 100%;
    -webkit-transform:rotate(-10deg);
}
.right-leg2{    
    background: #20B0C0; 
    position:absolute;
    top:38px;
    left:34px;
    height:10px;
    width:2px;
    -webkit-transform-origin: 0 100%;
    -webkit-transform:rotate(35deg);
}
.right-leg3{     
background: #20B0C0;
position: absolute;
top: 48px;
left: 38px;
height: 5px;
width: 2px;
-webkit-transform-origin: 0 100%;
-webkit-transform: rotate(-45deg);
}
.right-leg4{     
background: #20B0C0;
position: absolute;
top: 46px;
left: 29px;
height: 7px;
width: 2px;
-webkit-transform-origin: 0 100%;
-webkit-transform: rotate(45deg);
}
.right-leg5{
background: #20B0C0;
position: absolute;
top: 41px;
left: 28px;
height: 7px;
width:...