JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div></div>

CSS

* {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

div {
  height: 100vh;
  background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);

  &::before {
    content: "HONGDA LIN";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: clamp(2em, 12vw, 8em);
    white-space: nowrap;
    mix-blend-mode: difference;
  }
}

JavaScript

// https://codepen.io/Chokcoco/pen/GRYOJPo