JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div style="--a: #ffc300"></div>

CSS

div {
	width: 300px;
	height: 300px;
	margin: 100px;
	background: hsl(var(--a));

	--b: hsl(from var(--a) h s calc(l + 20));
	
	border: 20px solid var(--b);
}