JSFiddle - React, Tailwind, and code Playground

by stevelove

HTML

<div class="bug">
    <div class="head">:</div>
    <div class="legs"></div>
    <div class="legs"></div>
    <div class="legs"></div>
</div>
<br><br><br><br><br><br>
<div class="lady bug">
    <div class="head">:</div>
    <div class="legs"></div>
    <div class="legs"></div>
    <div class="legs"></div>
</div>

CSS

.bug {
    position:relative;
    margin:50px auto;
    width:100px;
}

.bug:before, .bug:after {
    content:"";
    height:41px;
    width:90px;
    -moz-border-radius: 90px 90px 0 0;
    -webkit-border-radius: 90px 90px 0 0;
    border-radius: 90px 90px 0 0;
    background:#3c3;
    border:4px solid #3c3;
    border-bottom:2px solid #000;
    position:absolute;
    left:0;
    top:0;
}

.bug:after {
    -moz-border-radius: 0 0 90px 90px;
    -webkit-border-radius: 0 0 90px 90px;
    border-radius: 0 0 90px 90px;
    border:4px solid #3c3;
    top:47px;
}

.lady.bug:before, .lady.bug:after {
    border-color:#f00 #f00 #000 #f00;
    background:#f00;   
}

.lady.bug:after {
    border-color:#f00; 
}

.head {
    height:80px;
    width:40px;
    -moz-border-radius: 0 80px 80px 0;
    -webkit-border-radius:  0 80px 80px 0;
    border-radius: 0 80px 80px 0;
    background:#000;
    position:absolute;
    top:8px;
    left:80px;
    text-indent:20px;
    z-index:1;
}

.head:first-line {
    color:#f70;
    font-size:130px;
    line-height:.42;
}

.lady .head {
    text-indent:-50px;
}

.lady .head:first-line {
    color:#000;
}

.head:before, .head:after {
    content:"";
    width:60px;
    height:50px;
    border:2px solid #000;
    border-top:0 none;
    border-left:0 none;
    -moz-border-radius: 0 0 50px 0;
    -webkit-border-radius: 0 0 50px 0;
    border-radius: 0 0 50px 0;
    position:absolute;
    top:-14px;
    left:20px;
}

.head:after {
    border:2px solid #000;
    border-bottom:0 none;
    border-left:0 none;
    -moz-border-radius:0 50px 0 0;
    -webkit-border-radius:0 50px 0 0;
    border-radius:0 50px 0 0;
    position:absolute;
    top:38px;
}

.legs:before, .legs:after {
    content:"";
    width:20px;
    height:30px;
    border:4px solid #000;
    border-bottom:0 none;
    border-right:0 none;
    -moz-border-radius:25px 0 0 0;
    -webkit-border-radius:25px 0 0 0;
    border-radius:25px 0 0 0;
    position:absolute;
    top:-10px;
   ...