JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<p>
some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text 
</p>


<div class="box" id="box"></div>

<p>
some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text 
</p>

CSS

.box {
position:fixed;top:0;left:0;z-index:99;height:100%;width:100%;  
visibility: hidden;
opacity: 1;
transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-webkit-transition: opacity 2s ease-in-out;


}

.box2 {visibility: visible;opacity: 0;}

@media screen and (max-width: 974px) {
.box {display:none;background-image:none;}
.box2 {display:none;background-image:none;}}

JavaScript

var box = document.getElementById('box');

setTimeout(function(){ 

box.className = "box box2";

}, 3000);