JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

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

CSS

.wrap {
   position: relative;            
}

.wrap:before {
   content: '';
   display: block;
   padding: 100% 100% 0 0;    
}

.circle {
   position: absolute;
   left: 10px;
   right: 10px;
   top: 10px;
   bottom: 10px;
   background: green;
   border-radius: 50%;    
}