JSFiddle - React, Tailwind, and code Playground

by Simonwep

HTML

<button>Click me</button>

CSS

body * {
  transition: all 0.3s 0s;
}

body {
  background: white;
}

body.active * {
  color: red;
  background: green;
}

JavaScript

const createSpanWithDepth = depth => {
  let wrapper = document.createElement('div');
  const root = wrapper;

  for (let i = 0; i < depth - 1; i++) {
    const next = document.createElement('div');
    next.appendChild(wrapper);
    wrapper = next;
  }

  const span = document.createElement('span');
  span.innerHTML = 'Depth' + depth; // JSfiddle doesn't support template strings lol

  root.appendChild(span);
  return wrapper;
}

const {
  body
} = document;

for (let i = 0; i < 100; i += 10) {
  body.appendChild(createSpanWithDepth(i));
}


const btn = document.querySelector('button');
btn.addEventListener('click', () => body.classList.toggle('active'))