JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<div class="wrap">
    <div class="inner">
        <div class="inner-bg"></div>
    </div>

CSS

body {
    /*background: url(http://geocarrefour.revues.org/docannexe/image/842/img-1-small580.png) no-repeat;*/
    margin:0px;
}
.inner-bg {
    background: url(http://geocarrefour.revues.org/docannexe/image/842/img-1-small580.png) no-repeat;
    height: 425px;
    /*width:380px;*/
    width: 600px;
    border-radius:50% 0 0 50%;
   
}
div.wrap {
    height: 425px;
    width: 400px;
    border-radius: 50%;
}

div.inner:after {
content: "";
background: white;
opacity: 0.5;
top: 20px;
left: -4px;
bottom: 0;
width: 250px;
right: 0;
height: 375px;
width: 439px;
border-radius: 50%;
position: absolute;
z-index: 5;
}
div.wrap:after {
    content:"";
    background: red;
    height: 425px;
    top: 0;
    left: 0;
    bottom: 0;
    width: 180px;
    right: 0;
    position: absolute;
    z-index: -1;
}