JSFiddle - React, Tailwind, and code Playground

by alexandroppolus

HTML

<div class="dark">
<div class="inner">
tyrteuteyuyti
</div>
</div>

CSS

.dark {
  --bg: #333;
  --f: #eee;
}

.light {
  --bg: red;
  --f: #000;
}

.inner {
  background-color: var(--bg);
  color: var(--f);
  height: 300px;
  transition: background-color 1s ease-out 0s !important;
}

JavaScript

document.querySelector('div').onclick = function() {
	this.className = this.className === 'dark' ? 'light' : 'dark';
}