JSFiddle - React, Tailwind, and code Playground

HTML

<div class="fancy">something</div>

CSS

.fancy {
   
  /* Within a circle, centered text looks prettier. */
  text-align : center;

  /* Let's avoid our text touching the border. As
     our text will still flow in a square, it looks
     nicer that way, giving the feeling that it's a "real"
     circle. */
  padding : 1em;

  /* The border will make the circle visible.
     You could also use a background, as
     backgrounds are clipped by border radius */
  border : 0.5em solid black;

  /* Let's make sure we have a square.
     If it's not a square, we'll get an
     ellipsis rather than a circle ;) */
  width  : 8em;
  height : 8em;

  /* and let's turn the square into a circle */
  border-radius: 100%;
  vertical-align: middle;
  justify-content: center;
}