JSFiddle - React, Tailwind, and code Playground

HTML

<div class="svg-wrapper">
    <div class="svg-clipped"></div>
</div>
<svg height="0" width="0">
    <defs>
        <clipPath id="svgPath">
            <text x="100" y="10" alignment-baseline="middle" text-anchor="middle">TEXT</text>
        </clipPath>
    </defs>
</svg>

CSS

.svg-wrapper {
	text-align: center;
}
.svg-clipped {
    -webkit-clip-path: url(#svgPath);
    clip-path: url(#svgPath);
    background: #000;
    width: 100%;
    height: 150px;
}