JSFiddle - React, Tailwind, and code Playground

HTML

<svg viewbox="0 0 100 60">
  <defs>
  	<g id="text">
  	  <text text-anchor="middle" x="50" y="18" dy="1">SVG</text>
      <text text-anchor="middle" x="50" y="30" dy="1">Text mask</text>
	</g>
    <mask id="mask" x="0" y="0" width="100" height="50">
      <rect x="0" y="0" width="100" height="40" fill="#fff"/>
      <use xlink:href="#text"/>
    </mask>
  </defs>
  <rect x="5" y="5" width="90" height="30" mask="url(#mask)" fill-opacity="0.5"/>    
  <use xlink:href="#text" fill="transparent"/>
</svg>

CSS

body{
  background:url('https://farm9.staticflickr.com/8760/17195790401_94fcf60556_c.jpg');
  background-size:cover;
  background-attachment:fixed;
}
svg{width:100%;}

/* Following is really hacky */
/*The selection seems opaque on FF so we add this to render the text as black...*/
/* that's a bug, don't use it in prod */
text::-moz-selection{
  background: transparent;
  }