JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<style>
	body {
		margin: 0;
	}
	div {
		width: 100vw;
		height: 50vh;
	}
  div > div {
		display: flex;
		justify-content: center;
		align-items: center;
		font: 5vh/1 sans-serif;
		color: rgba(255, 255, 255, 0.8);
		background: linear-gradient(
		  to right,
			#00B5E2 0%,  /* display-p3 0.3173 0.6991 0.8683 */
			#1E22AA 100%); /* display-p3 0.1205 0.1327 0.6402 */
  }
	div::before {
		background: #00B5E2;
	}
	div::after {
		background: #1E22AA;
	}
  @supports (color: color(display-p3 1 0 0)) {
    .p3 > div {
      background: linear-gradient(
        to right,
        color(display-p3 0.06 0.71 0.89),
        color(display-p3 0 0.15 0.6));
    }
		.p3::before {
			background: color(display-p3 0.06 0.71 0.89);
		}
		.p3::after {
			background: color(display-p3 0 0.15 0.6));
		}
  }
</style>
<div><div>sRGB</div></div>
<div class="p3"><div>DCI-P3</div></div>