JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div></div>

<!-- <svg xmlns="http://www.w3.org/2000/svg" width="237" height="47" viewBox="0 0 237 47">
  <rect id="Rectangle_418" data-name="Rectangle 418" width="237" height="47" fill="hsla(0, 100%, 100%, 1.0)"

/>
</svg> -->

SCSS

:root {
	--h: 0deg;
	--s: 100;
	--l: 100;
}

div {
	height: 100px;
	background: hsl(var(--h), var(--s), var(--l));
}

svg rect {
filter: hue-rotate(0deg) brightness(0.5);
}