JSFiddle - React, Tailwind, and code Playground

by stevelove

HTML

<div class="spider">
    <div class="eyes"></div>
    <div class="mouth happy"></div>
    <div class="legs"></div>
    <div class="legs"></div>
    <div class="legs"></div>
    <div class="legs"></div>
</div>

CSS

.spider {
    width: 100px;
    height: 100px;
    background: #f70;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    position:relative;
    margin:0 auto;
}

.eyes:before, .eyes:after {
    content:"\25CF";
    width: 12px;
    height: 18px;
    background: #3c3;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    padding:2px 0 0 8px;
    position:absolute;
    top:-5px;
    left:10px;
}

.eyes:after {
    height:18px;
    width:20px;
    left:65px;
    padding:2px 0 0 0;
}

.mouth.grumpy {
    height:40px;
    width:45px;
    -moz-border-radius: 30px 30px 0 0 / 50px 50px 0 0;
    -webkit-border-radius: 30px 30px 0 0 / 50px 50px 0 0;
    border-radius: 30px 30px 0 0 / 50px 50px 0 0;
    border:2px solid #000;
    border-bottom:0 none;
    position:absolute;
    left:25px;
    top:30px;
}

.mouth.happy {
    height:40px;
    width:45px;
    -moz-border-radius: 0 0 30px 30px / 0 0 50px 50px;
    -webkit-border-radius: 0 0 30px 30px / 0 0 50px 50px;
    border-radius: 0 0 30px 30px / 0 0 50px 50px;
    border:2px solid #000;
    border-top:0 none;
    position:absolute;
    left:25px;
    top:30px;
}

.legs:before, .legs:after {
    content:"";
    height:30px;
    width:60px;
    -moz-border-radius: 60px 60px 0 0;
    -webkit-border-radius: 60px 60px 0 0;
    border-radius: 60px 60px 0 0;
    border:4px solid #f70;
    border-bottom:0 none;
    position:absolute;
    left:-10px;
    top:80px;
    -webkit-transform: rotate(-25deg);
   -moz-transform:    rotate(-25deg);
   -ms-transform:     rotate(-25deg);
   -o-transform:      rotate(-25deg);
}

.legs:after {
    left:40px;
    -webkit-transform: rotate(25deg);
   -moz-transform:    rotate(25deg);
   -ms-transform:     rotate(25deg);
   -o-transform:      rotate(25deg);
}

.legs:nth-child(4):before, .legs:nth-child(4):after {
    left:-40px;
    top:70px;
    -webkit-transform: rotate(-20deg);
   -moz-transform:    rotate(-20deg);
 ...