JSFiddle - React, Tailwind, and code Playground

HTML

<div class="circle">
<div class="text">
TEXT multiline
will be
</div>
</div>

CSS

.circle {

  border-radius: 50%;
  width: 50%;
  height: auto;
 padding-top:50%;
  background-color: #403C36;
  box-shadow: 1px 0.2px 25px 1px rgba(0, 0, 0, 0.25);
  position:relative;
}

.text {
 
  position:absolute;
  color:#fff;
  text-align:center;
width:100%;
 transform: translateY(-50%);

top: 50%;


}