JSFiddle - React, Tailwind, and code Playground

by shubh0602

HTML

<div class="circle-text"><div>I'm a Circle!</div></div>
<div class="circle-text"><div>I'm a Circle!</div></div>
<div class="circle-text"><div>I'm a Circle!</div></div>

CSS

.circle-text {
    width:50%;
}
.circle-text:after {
    content: "";
    display: block;
    width: 100%;
    height:0;
    padding-bottom: 100%;
    border:1px solid black;
    -moz-border-radius: 50%; 
    -webkit-border-radius: 50%; 
    border-radius: 50%;
}
.circle-text div {
    float:left;
    width:100%;
    padding-top:50%;
    line-height:1em;
    margin-top:-0.5em;
    text-align:center;
  
}