JSFiddle - React, Tailwind, and code Playground

by lukemartin

HTML

<div><span></span><p></p></div>

CSS

div {
    width: 200px;
    margin: 50px auto;
    position: relative;
}
p {
-webkit-border-radius: 50%;
    height: 90px;
    width: 80px;
    border: 2px solid black;
    background: white;
    position: absolute;
}
span {
    width: 120px;
    height: 80px;
    position: absolute;
    border: 2px solid black;
    background: black;
    left: -20px;
    top: 70px;
    -webkit-border-top-left-radius: 70px;
    -webkit-border-top-right-radius: 70px;
    -webkit-border-bottom-left-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;
}