JSFiddle - React, Tailwind, and code Playground

HTML

<div class="parent">
  <div class="child"><span>1</span></div>
  <div class="child"><span>2</span></div>
  <div class="child"><span>3</span></div>
  <div class="child"><span>4</span></div>
</div>

CSS

.parent {
  display: flex;
}

.child {
  padding: 15px;
  background: #ccc;
  margin: 10px;
}

.child-click {
  background: #f00;
}

.child-hide {
  display: none;
}

JavaScript

var parent = document.querySelector('.parent');
var childLength = document.querySelectorAll('.child').length;
var countClick = 0;

parent.onclick = function(event) {

  var target = event.target;

  if (target.className == 'child') {
    target.className = 'child child-click';

    setTimeout(function() {
      target.className = 'child child-hide';
    }, 3000);
  }

  console.log(countClick);
  countClick++;

  if (childLength == countClick) {
     setTimeout(function() {
      parent.innerHTML = 'All right';
    }, 3000);
    
  }


}