JSFiddle - React, Tailwind, and code Playground

by pbhj

HTML

<script src="https://github.com/downloads/davatron5000/Lettering.js/jquery.lettering-0.6.1.min.js"></script>
<div class="title">XACT</div>

CSS

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

JavaScript

$(document).ready(function() {
    $(".title").lettering();
});