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, black, black 50%, white 50%, white);
  width: $size;
  height: $size;
  position:relative;
  
  .text {
    width: 300px;
    position: absolute;
    top: 90px;
    text-align: center;
    font-size: 6rem;
    color: white;
    mix-blend-mode: exclusion;
  }
}