JSFiddle - React, Tailwind, and code Playground

HTML

<div id="leaf"></div>
    <br><br><br>
        <div id="petal"></div>
    <br><br>
        <div id="eye"></div>
    <br><br>
        <div id="almond"></div>

CSS

#leaf {
    height:100px;
    width:100px;
    border:2px solid green;
    border-radius: 70px 0px 70px 0px;
    background:#00cc00;
}

#petal {
    height:100px;
    width:100px;
    border:2px solid #ff9999;
    border-radius: 0px 100px 0px 100px;
    background:#ffcccc;
}

#eye {
    height:100px;
    width:100px;
    border:2px solid #ccc;
    border-radius: 0px 80px 0px 80px;
    background:#fff;
    -moz-transform: rotate(-40deg);
    -webkit-transform: rotate(-40deg);
    -o-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    transform: rotate(-40deg);
    margin:20px;
}

#almond {
    height:100px;
    width:100px;
    border:2px solid #99ccff;
    border-radius: 30px 80px 10px 80px;
    background:#ccffff;
    -moz-transform: rotate(-40deg);
    -webkit-transform: rotate(-40deg);
    -o-transform: rotate(-40deg);
    -ms-transform: rotate(-40deg);
    transform: rotate(-40deg);
    margin:10px
}