JSFiddle - React, Tailwind, and code Playground

by genelocklin

HTML

<div class="circle"></div>

CSS

body { max-width: 320px; margin: 4em auto; }

.circle {
    width:4em;
    height:8em;
    background:red;
    position:relative;
}

.circle:after {
    position:absolute;
    top:0;
    left:0;
    content:"";
    background:black;
    width:8em;height:8em;
    border-radius: 100%;    
}