JSFiddle - React, Tailwind, and code Playground

by Ian Oxley

HTML

<header id="main">
    <h1>Main Heading</h1>
</header>

CSS

header {
    color: #000;
    font-family: Georgia, Serif;
}
.foo {
    color:red;
    font-size:200%;
}
.bar {
    color:blue;
    font-size:100%;
}

JavaScript

var mainHeader = document.getElementById('main');
if (mainHeader.classList.length === 0) {
	mainHeader.classList.add('foo');
}

mainHeader.classList.toggle('bar');

if (mainHeader.classList.contains('foo')) {
	mainHeader.classList.remove('foo');
}