JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapping-div">
  <p>This is some text</p>
  <p>This is some text</p>
  <p>This is some text</p>
  <div id="fadeout-div"></div>
</div>


<p><a href="#!/doit" id="doit">Do it again</a></p>










<div style="bottom:5px;font-size:small;left:8px;position:absolute">This example is based on the <a href="https://github.com/matthewbj/jQuery-Color-Fade" target="_top">jQuery Color Fade</a> plugin.</div>

CSS

#wrapping-div {
 height:200px;
 width:300px;
 border:1px solid #999;
 padding:1px 8px;
 background-color: #fff;
 position:relative;
 z-index:1;
}

#fadeout-div {
 height:100%;
 width:100%;
 background-color: #ffd700;
 position:absolute;
 top:0;
 left:0;
 z-index:-1
}

JavaScript

// on DOM ready

$('#fadeout-div').delay(500).fadeOut(1100); // easy?


// Below code for example only
$( document ).ready(function(e) {
    e.preventDefault();
    $('#fadeout-div').show().delay(500).fadeOut(1100);
});