JSFiddle - React, Tailwind, and code Playground

by Tom M

HTML

<div class='first box'></div>
<div class='second box'></div>
<div class='third box'></div>
<div class='fourth box'></div>

CSS

.box {
  width: 20px;
  height: 20px;
  background-color: red;
  position: absolute;
  opacity: 0;
  transition: 1s ease;
}

.first {
  left: 50px;
  top:20px;
}

.second {
  left: 100px;
  top:40px;
}

.third {
  left: 150px;
  top:60px;
}

.fourth {
  left:200px;
  top: 80px;
}

JavaScript

window.addEventListener('load', function() {
	let first = document.getElementsByClassName('first');
  let second = document.getElementsByClassName('second');
	let third = document.getElementsByClassName('third');
	let fourth = document.getElementsbyClassName('fourth');
  
  first.style.opacity = '1';
  
})