JSFiddle - React, Tailwind, and code Playground

by Alen Doe

HTML

<div class="wrap">
  <div class="prog">
    <div class="red">
      <div class="bg"></div>
      <span class="text">50</span>
    </div>
  </div>
</div>

CSS

.wrap {
  position: relative;
  width: 100px;
  height: 100px;
}
div.red {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: red;
  border-radius: 50px;
 }
 
 .bg {
   z-index: 20;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 80px;
   height: 80px;
   background-color: #fff;
   border-radius: 50px;
 }
 
 .text {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   z-index: 1000;
   color: red;
 }
 
 .prog{
   z-index: 500;
   position: absolute;
   width: 100px;
   height: 100px;
   background-color: blue;
   border-radius: 50px;
 }