JSFiddle - React, Tailwind, and code Playground
HTML
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</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');
parent.onclick = function(event){
var target = event.target;
if(target.className == 'child'){
target.className = 'child child-click';
setTimeout(function(){
target.className = 'child child-hide';
}, 5000)
}
else if (target == parent.lastElementChild) {
parent.innerHTML = 'All right';
}
}