JSFiddle - React, Tailwind, and code Playground

by stevelove

HTML

<div class="turtle">
    <div class="head"></div>
    <div class="tail"></div>
</div>

CSS

.turtle {
    height:90px;
    width:180px;
    -moz-border-radius:180px 180px 0 0;
    -webkit-border-radius:180px 180px 0 0;
    border-radius:180px 180px 0 0;
    background:#3c3;
    position:relative;
    margin:100px;
}

.turtle:before, .turtle:after {
    position:absolute;
}

.turtle:before {
    content:"\22A4\22A4";
    color:#060;
    font-size:72px;
    top:-3px;
    left:35px;
    letter-spacing:-20px;
    -webkit-transform: rotate(0deg) scaleY(0.8) scaleX(1.6);
    -moz-transform:    rotate(0deg) scaleY(0.8) scaleX(1.6);
    -ms-transform:     rotate(0deg) scaleY(0.8) scaleX(1.6);
    -o-transform:      rotate(0deg) scaleY(0.8) scaleX(1.6);
}

.turtle:after{
    border-top:4px solid #060;
    content:"\22A4";
    color:#060;
    font-size:72px;
    top:53px;
    left:37px;
    line-height:.38;
    width:104px;
    text-indent:24px;
    -webkit-transform: rotate(0deg) scaleY(0.8) scaleX(1.6);
    -moz-transform:    rotate(0deg) scaleY(0.8) scaleX(1.6);
    -ms-transform:     rotate(0deg) scaleY(0.8) scaleX(1.6);
    -o-transform:      rotate(0deg) scaleY(0.8) scaleX(1.6);
}

.head {
    width:20px;
    height:30px;
    border:10px solid #990;
    border-top:0 none;
    border-left:0 none;
    -moz-border-radius:0 0 25px 0;
    -webkit-border-radius:0 0 25px 0;
    border-radius:0 0 25px 0;
    position:absolute;
    top:65px;
    left:180px;
    -webkit-transform: rotate(0deg);
    -moz-transform:    rotate(0deg);
    -ms-transform:     rotate(0deg);
    -o-transform:      rotate(0deg);
}

.head:before, .head:after {
    background:#990;
    content:"";
    width:10px;
    height:30px;
    position:absolute;
    top:20px;
    left:-30px;
    -webkit-transform: rotate(-15deg);
    -moz-transform:    rotate(-15deg);
    -ms-transform:     rotate(-15deg);
    -o-transform:      rotate(-15deg);
}