JSFiddle - React, Tailwind, and code Playground

by Ansel Santosa

HTML

<div id="splash"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id lectus eu justo placerat tincidunt ut quis nisi. Quisque ac tincidunt enim. Proin luctus, tortor sit amet condimentum fringilla, dui neque posuere ligula, vitae venenatis turpis augue et elit. Quisque ut urna felis. Duis vestibulum tempus ultricies. Ut in turpis et dolor fermentum euismod id quis ipsum. Nullam sed leo libero. Ut ut elementum eros. Nullam lacinia condimentum ultricies. Cras bibendum lorem in massa facilisis gravida. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rutrum nisi sed sapien tristique nec sodales arcu faucibus. Suspendisse dignissim faucibus elit, non vehicula augue pellentesque sed. Phasellus eu libero massa, vitae eleifend massa.

Pellentesque molestie blandit purus, a facilisis diam porttitor a. Pellentesque a enim sed augue fermentum ornare ac a sem. Vestibulum nec felis tortor, id dapibus orci. Pellentesque elementum augue sed lacus euismod sit amet iaculis libero porttitor. Nunc vitae turpis nunc. Donec sed quam ut sapien malesuada iaculis. Duis aliquet enim non elit ultrices facilisis. Donec vel leo risus. Nulla lobortis enim sit amet sem lacinia pharetra. Morbi mauris metus, molestie ac vestibulum sed, aliquet a augue. Nam vel metus augue. Ut et lorem leo. Sed nibh nibh, convallis ut mollis nec, venenatis nec nisi.

Donec in mauris id nisl ultricies luctus. Cras sodales, erat a blandit blandit, nisi metus cursus diam, rutrum pellentesque mi metus nec enim. Curabitur quis odio leo. Suspendisse aliquet imperdiet porta. Donec feugiat hendrerit lacus quis porttitor. Sed molestie, nisi nec ultrices adipiscing, augue nisl gravida diam, nec aliquet felis lectus a mauris. Nam molestie augue id lectus euismod viverra. Suspendisse egestas tellus ut mauris volutpat at interdum sapien laoreet. Ut et magna in massa posuere congue sit amet condimentum eros.

Nullam augue lectus, fringilla et posuere vel, interdum et dolor. Etiam quis massa...

CSS

#splash {
    background: #000;
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    -webkit-transition: opacity 1s linear;
       -moz-transition: opacity 1s linear;
        -ms-transition: opacity 1s linear;
         -o-transition: opacity 1s linear;
            transition: opacity 1s linear;
    opacity: 1;
}

JavaScript

setTimeout(function() {
    document.getElementById('splash').setAttribute('style','opacity:0;');
    setTimeout(function() {
        document.getElementById('splash').setAttribute('style','display:none;')
    }, 1000);
}, 3000);