JSFiddle - React, Tailwind, and code Playground

by Vince

HTML

<div id="mask-reveal-box">
	<svg id="span-svg-3" xmlns="http://www.w3.org/2000/svg" class="span-svgs" viewbox="0 0 553 144">
		<defs>
			<mask id="clipPath3" maskunits="userSpaceOnUse">
				<rect id="svg-rect-3" class="svg-reveal" x="0" y="-100" data-svg-origin="0 100" fill="#FFF" width="553" height="144"></rect>
			</mask>
		</defs>
		<g mask="url(#clipPath3)">
			<text transform="translate(0 10)" text-anchor="middle" fill="white">Experienced Teams Working Together for Over a Decade</text>
		</g>
	</svg>
</div>

CSS

BODY {background: black;}
#mask-reveal-box {
	outline: 1px dotted pink;
	color: #FFF;
	position: relative;
	display: block;
	width: 553px;
	height: 144px;
}
#mask-reveal-box .svg-reveal,
#mask-reveal-box mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#mask-reveal-box text {
	color: #FFF;
	outline: 1px dashed pink;
}