JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<div class="yin-yang">
    <span class="text">Izi</span>
</div>

SCSS

$size: 300px;
.yin-yang {
  background: linear-gradient(to right:);
  width: $size;
  height: $size;
  position:relative;
  
  .text {
    width: 300px;
    position:absolute;
    top: 90px;
    text-align: center;
    font-size: 6rem;
  }
  
}