JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<div id="projectContainer">
    <div id="appleSuperContainer">
        <div id="appleContainer">
            <div id="leaf"></div>
            <div id="largeCircle"></div>
            <div id="bite"></div>
            <div id="topHump"></div>
            <div id="bottomHump"></div>
        </div>
    </div>
</div>

CSS

/*Created by William Green (15) in California*/
/*Email [email protected] for more information*/
#projectContainer {
    background-color:#ddd;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
html,body{
    padding:0;
    margin:0;
}
#appleSuperContainer{
    position:absolute;
    top:calc(50% - 100px);
    display:table;
    width:100%;
    height:20px;
}
#appleContainer{
    display:table;
    margin:auto;
}
#leaf{
    width:20px;
    height:60px;
    background-color:#000;
    border-radius:300%;
    -o-transform:rotate(45deg);
    -moz-transform:rotate(45deg);
    -webkit-transform:rotate(45deg);
    -ms-transform:rotate(45deg);
    transform:rotate(45deg);
    position:relative;
    left:80px;
    z-index:1000;
}
#largeCircle{
    background-color:#000;
    width:140px;
    height:170px;
    border-radius:30px/170px;
    border-top-left-radius:60px;
    border-top-right-radius:60px;
    border-bottom-left-radius:60px;
    border-bottom-right-radius:60px;
}
#bite{
    width:50px;
    height:90px;
    position:relative;
    bottom:150px;
    background-color:#ddd;
    left:105px;
    border-bottom-left-radius:90px;
    border-top-left-radius:90px;
}
#topHump{
    background-color:#ddd;
    width:50px;
    height:20px;
    bottom:268px;
    left:43px;
    position:relative;
    border-radius:50%;
}
#topHump:after{
    background-color:#ddd;
    content:'';
    width:30px;
    height:10px;
    display:block;
    position:relative;
    top:-4px;
    left:28px;
    border-radius:50%;
    -o-transform:rotate(-10deg);
    -moz-transform:rotate(-10deg);
    -ms-transform:rotate(-10deg);
    -webkit-transform:rotate(-10deg);
    transform:rotate(-10deg);
}
#topHump:before{
    background-color:#ddd;
    content:'';
    width:30px;
    height:10px;
    display:block;
    position:relative;
    top:6px;
    left:-5px;
    border-radius:50%;
    -o-transform:rotate(10deg);
    -moz-transform:rotate(10deg);
   ...