JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<div id="splash" ng-cloak>
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT8LDgoYkHquxuhTcAESii8PpKkVgqAOlY5opAheL9ZzYCUzNMnxg" alt="" />
  </div>
 <div>hello this is just a a test to see if it shows up</div>

CSS

html,body{
    color:red;
    width:100%;
    height:100%;
    overflow:hidden;
}
#splash,#splash *{
   z-index:-1;
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    width:100%;
    height:100%;
}

JavaScript

var repeater = function() {
    setTimeout(function() {
      //console.log(document.getElementById('splash').style.opacity);
      document.getElementById('splash').style.opacity = parseFloat(getComputedStyle(document.getElementById('splash')).opacity)/1.1;
      
    }, 10);
    setTimeout(repeater,10);
  };
setTimeout(function(){
  repeater();
},2000);