JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<svg height="540">
	<defs>
		<linearGradient id="grad">
			<stop offset="0%" stop-color="#00B5E2" />
			<stop offset="100%" stop-color="#1E22AA" />
		</linearGradient>
		<linearGradient id="grad-p3">
			<stop offset="0%" stop-color="color(display-p3 0.06 0.71 0.89)" />
			<stop offset="100%" stop-color="color(display-p3 0 0.15 0.6)" />
		</linearGradient>
	</defs>
	<rect width="300" height="180" fill="url(#grad)" />
	<rect y="180" width="300" height="180" fill="url(#grad-p3)" />
	<rect y="360" width="150" height="180" fill="color(display-p3 0.06 0.71 0.89)" />
	<rect x="150" y="360" width="150" height="180" fill="color(display-p3 0 0.15 0.6)" />
</svg>