JSFiddle - React, Tailwind, and code Playground

by dusset

HTML

<h1>Test</h1>
<p>Lots of blalblalbllfefpoewkf owef wiejfiofjwioe fwifj iowejfwoi fjfwef </p>
<button id="btn">DING!</button>
<div id="flash"></div>
<h2 id="ding">Level 3</h2>
<div id="shadow"></div>

CSS

html, body { height: 100% }

body { background:#999; }

#flash { width: 100%; height: 100%; position:absolute; top:0; left:0; z-index:100; background:#ff0000; }

h2 { font-size:80px; color:#00ff00; position:absolute; top:40%; left:50%; margin-left:-120px;z-index:200; }

#shadow { width:150px; height:1px; background:#222; box-shadow:0 0 120px 70px #000; position:absolute; top:50%; left:50%; margin-left:-80px; margin-top:-00px;border-radius:100px;z-index:120; }

JavaScript

function testFx()
{
$('#flash').hide();
};
function btnFx()
{
$('#flash').fadeIn(200);
$('#ding').fadeIn(200);
    $('#shadow').fadeIn(200);
$('#flash').delay(1000).fadeOut(2000);
$('#ding').delay(5000).fadeOut(3000);
    $('#shadow').delay(5000).fadeOut(3000);
};
document.getElementById('flash').onclick = testFx;
document.getElementById('btn').onclick = btnFx;
$('#flash').hide();
$('#ding').hide();
$('#shadow').hide();