JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none">
	<defs>
			<clipPath id="cut-off">
				<rect x="0" y="0" width="100" height="100"/>
			</clipPath>
			<pattern id="Pattern" x="0" y="0" width="3" height="3" patternUnits="userSpaceOnUse">
				<rect x="0" y="0" width="1" height="1" fill="#{rgba(black, .2)}"/>
			</pattern>
	</defs>
	<rect x="0" y="0" width="100" height="100" fill="url(#Pattern)" stroke="url(#Pattern)" stroke-width="10" clip-path="url(#cut-off)" />
</svg>

CSS

svg {width: 100%; height: 100%;}