JSFiddle - React, Tailwind, and code Playground

by alois de gouvello

HTML

<div id="identity"></div>

CSS

body {
  padding:25px;
  background:#f5f5f6;
}

#identity
{
position:relative;
margin:0.5em auto 0em;
width:20em;
height:20em;
border-radius:30%;
background:#63c7c7;
transform:rotate(45deg);
}

#identity:before
{
content: "";
position: absolute;
left: 0em;
top: 7em;
width: 20em;
height: 6.5em;
border-radius: 30% 0% 30% 0%/75% 0% 75% 0%;
background: red;
z-index: 1;
}

#identity:after
{
content: "";
position: absolute;
left: 6.5em;
top: 0em;
width: 7em;
height: 20em;
background: #f5f5f6;
z-index: 2;
box-shadow:inset 0em 7em 0em #83D1D5,inset 0em -6.5em 0em #83D1D5;
}

JavaScript

/* take from here
** http://codepen.io/berdejitendra/pen/DuHve
*/