JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<section>
  <button>Click</button>
</section>

<br>

<section>
  <div></div>
  <div></div>
  <div></div>
</section>

CSS

div {
  background: red;
  height: 10px;
  width: 10px;
  border-radius: 100%;
  margin-bottom: 10px;
  transition: transform 1s ease;
}

html[toggle] div {
  transform: translate3d(200px, 0, 0)
}

div:nth-child(1) {
  transition-delay: .25s;
}

div:nth-child(2) {
  transition-delay: .5s;
}

div:nth-child(3) {
  transition-delay: .75s;
}

JavaScript

document.querySelector('button').addEventListener('click', _ => {
  const html = document.documentElement
	if (html.getAttribute('toggle') === '') {
  	html.removeAttribute('toggle')
  } else {
  	html.setAttribute('toggle', '')
  }
})