JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<div class="test-wrapper">
	<div>50</div>
	<div>100</div>
	<div>200</div>
	<div>300</div>
	<div>400</div>
	<div>500</div>
	<div>600</div>
	<div>700</div>
	<div>800</div>
	<div>900</div>
	<div>950</div>
</div>

CSS

.dark {
}

.test-wrapper {
   	--color-rgb: rgb(129, 202, 56);
   	--color-hsl: hsl(90, 58%, 51%);
	--color-hex: #81ca38;
	
	--primary-600: var(	--color-hsl);
    --primary-50: color-mix(in srgb, var(--primary-600) 5%, white);
    --primary-100: color-mix(in srgb, var(--primary-600) 10%, white);
    --primary-200: color-mix(in srgb, var(--primary-600) 20%, white);
    --primary-300: color-mix(in srgb, var(--primary-600) 60%, white);
    --primary-400: color-mix(in srgb, var(--primary-600) 70%, white);
    --primary-500: color-mix(in srgb, var(--primary-600) 80%, white);
	
    --primary-700: color-mix(in srgb, var(--primary-600), black 20%);
    --primary-800: color-mix(in srgb, var(--primary-600), black 35%);
    --primary-900: color-mix(in srgb, var(--primary-600), black 55%);
    --primary-950: color-mix(in srgb, var(--primary-600), black 65%);
	
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 10%;
	& div {
		width: 50px;
		height: 50px;
		margin-top: 3px;
		font-size: .8rem;
		font-family: "Noto Sans";
		
		&:nth-child(1) {
			background: var(--primary-50);
		}
		&:nth-child(2) {
			background: var(--primary-100);
		}
		&:nth-child(3) {
		background: var(--primary-200);
		}
		&:nth-child(4) {
			background: var(--primary-300);
		}
		&:nth-child(5) {
			background: var(--primary-400);
		}
		&:nth-child(6) {
			background: var(--primary-500);
		}
		&:nth-child(7) {
			background: var(--primary-600);
		}
		&:nth-child(8) {
			background: var(--primary-700);
		}
		&:nth-child(9) {
			background: var(--primary-800);
		}
		&:nth-child(10) {
			background: var(--primary-900);
		}
		&:nth-child(11) {
			background: var(--primary-950);
		}
	}
	

	
}