JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<div id="red" class="red"></div>
<div id="blue" class="blue"></div>

CSS

* {
  padding:0;
  margin: 0;
}
div {
  height: 50px;
}
.red {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  background:red;
  z-index:2;
  opacity:1;
  transition: opacity 500ms;
}
.blue {
  background:blue;
}
.hide {
  opacity:0;
}

JavaScript

var divred = document.getElementById("red");
divred.addEventListener("click", hideForTenSec);
  
function hideForTenSec() {
  divred.classList.add("hide");
  setTimeout(function(){
  	divred.classList.remove("hide");
  }, 10000);
}