JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div class="circle">
    <p>Total ROE's</p>
    <p>300</p>
    <p>70%</p>
 </div>
</div>

CSS

.wrapper{padding:30px;}

.circle{
    border-radius: 50%;
    background:#32a500;    
    box-shadow: 0px 0px 0px 16px  #f1f1f1;
    border: 16px solid #f9f9f9;
    width:220px;
    height:220px;
    box-sizing:border-box;
}

.circle:hover {
     background:red;    
}