JSFiddle - React, Tailwind, and code Playground

by pbhj

HTML

<div>X</div><div>A</div><div>C</div><div>T</div>

CSS

div {
    font-size:100px; 
    border:2px; 
    background: linear-gradient(135deg, red 0%, red 40%, black 40%, black 100%), white;
    -webkit-background-clip: text, border; 
    color: transparent;
    width:100px;
    float:left;
}