JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<svg height="360">
	<defs>
		<linearGradient id="grad">
			<stop offset="0%" stop-color="red" />
			<stop offset="100%" stop-color="green" />
		</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)" />
</svg>

CSS

div {
  position: relative;
  width: 20vw;
  height: 20vh;
}

div div {
  left: 2vw;
  top: 2vh;
  width: 16vw;
  height: 16vh;
}

div:nth-child(1) {
  background-color: rgb(255, 0, 0);
}

div:nth-child(1) div {
  background-color: color(display-p3 1 0 0 / 1);
}

div:nth-child(2) {
  background-color: rgb(0, 255, 0);
}

div:nth-child(2) div {
  background-color: color(display-p3 0 1 0 / 1);
}

div:nth-child(3) div {
  background: linear-gradient(to right, color(display-p3 0 1 0 / 1), color(display-p3 1 0 0 / 1))
}