JSFiddle - React, Tailwind, and code Playground

HTML

<link href='http://fonts.googleapis.com/css?family=Zeyada' rel='stylesheet' type='text/css'>
<div id="apple">
    <div class="canvas">
        <div class="icon"><p>Apple - No Images. No JS. Just CSS</p>
            <div class="slice1 slice">
                <div class="apple1"></div>
                <div class="apple2 apple1"></div>
                <div class="apple3"></div>
                <div class="apple4 apple3"></div>
                <div class="apple5"></div>
            </div>
            <div class="slice2 slice">
                <div class="apple1"></div>
                <div class="apple2 apple1"></div>
                <div class="apple3"></div>
                <div class="apple4 apple3"></div>
                <div class="apple5"></div>
            </div>
            <div class="slice3 slice">
                <div class="apple1"></div>
                <div class="apple2 apple1"></div>
                <div class="apple3"></div>
                <div class="apple4 apple3"></div>
                <div class="apple5"></div>
            </div>
            <div class="slice4 slice">
                <div class="apple1"></div>
                <div class="apple2 apple1"></div>
                <div class="apple3"></div>
                <div class="apple4 apple3"></div>
                <div class="apple5"></div>
            </div>
            <div class="slice5 slice">
                <div class="apple1"></div>
                <div class="apple2 apple1"></div>
                <div class="apple3"></div>
                <div class="apple4 apple3"></div>
                <div class="apple5"></div>
            </div>
            <div class="slice6 slice">
                <div class="apple1"></div>
                <div class="apple2 apple1"></div>
                <div class="apple3"></div>
                <div class="apple4 apple3"></div>
                <div class="apple5"></div>
            </div>
            <div class="slice">
                <div class="apple6">
   ...

CSS

html, body {
    font-family: 'Zeyada', cursive;
    font-size: 20px;
    padding: 0;
    margin: 0;
    background:url(http://kachibito.net/sample/Alice/demos/common/ios-linen.jpg);
        color: #fff;
}

p{font-size: 20px ;
opacity: 0.7 ;
    filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=70) ;
    margin: 5px 0 0 115px ;
}

#apple .canvas,
.apple6,
.apple7,
.apple8,
.apple61 {
    background:url(http://kachibito.net/sample/Alice/demos/common/ios-linen.jpg);
}
.apple1 {
    border-radius:108px 108px 108px 94px/128px 128px 128px 128px;
    height:128px;
    top:47px;
    width:108px;
}
.apple2 {
    left:72px;
}
.apple3 {
    border-radius:22px 64px 64px 64px/106px 106px 106px 106px;
    height: 106px;
    left:12px;
    -moz-transform:rotate(-25deg);
    -webkit-transform:rotate(-25deg);
    transform:rotate(-25deg);
    top:98px;
    width: 64px;
}
.apple4 {
    border-radius:64px 22px 64px 64px/106px 106px 106px 106px;
    left:103px;
    -moz-transform:rotate(25deg);
    -webkit-transform:rotate(25deg);
    transform:rotate(25deg);
}
.apple5 {
    height: 145px;
    left:54px;
    top:53px;
    width:70px;
}
.apple6 {
    left:50px;
    -moz-transform:scaley(0.5);
    -webkit-transform:scaley(0.5);
    transform:scaley(0.5);
    top:14px;
}
.apple61 {
    border-radius:20px;
    height: 80px;
    -moz-transform: rotate(-45deg) scale(0.9);
    -webkit-transform: rotate(-45deg) scale(0.9);
    transform: rotate(-45deg) scale(0.9);
    width: 80px;
}
.apple7 {
    border-radius:47px/22px;
    height: 22px;
    left:66px;
    top:192px;
    width: 47px;
}
.apple8 {
    border-radius:85px;
    height: 85px;
    left:144px;
    top:63px;
    width: 85px;
}
#apple .slice {
    height: 200px;
    left:160px;
    position: absolute;
    top:40px;
    width:180px;
}
#apple .slice * {
    position: absolute;
   
}
#apple .slice1 *,
.apple9:before,
.apple9:after {
    background: #62bb47;
}
#apple .slice2 * {
    background: #fcb827;
}
#apple...