JSFiddle - React, Tailwind, and code Playground

by olian04

HTML

<script src="https://cdn.jsdelivr.net/gh/olian04/better-random/src/index.js"></script>
<script src="https://cdn.jsdelivr.net/gh/olian04/easy-css-variables/src/index.js"></script>
<div id="first">Hello</div>
<div id="second">Hello</div>
<div id="third">Hello</div>
<div id="fourth">Hello</div>

CSS

:root {
  --backgroundColor: pink;
}

body {
  background: var(--backgroundColor);
}

#first {
  background: var(--backgroundColor);
}

#second {
  background: var(--backgroundColor);
}

#fourth {
  background: var(--backgroundColor);
}

JavaScript

ecv.backgroundColor = 'white';

ecv('#first').backgroundColor = 'skyblue';

const secondDiv = document.querySelector('#second');
ecv(secondDiv).backgroundColor = 'orangered';

secondDiv.style.color = ecv(secondDiv).textColor;
ecv(secondDiv).textColor = 'white';

const thirdDiv = document.querySelector('#third');
thirdDiv.style.background = ecv(thirdDiv).backgroundColor;
thirdDiv.style.color = ecv(thirdDiv).textColor;
ecv(thirdDiv).backgroundColor = 'black';
ecv(thirdDiv).textColor = 'pink';

setInterval(() => {
	ecv('#fourth').backgroundColor = Math.random.rgb();
}, 1000);