JSFiddle - React, Tailwind, and code Playground
HTML
<div class="fadeOutMe">meh gonna disseaper soon!</div
CSS
:root {
margin: 30px;
}
div.fadeOutMe {
padding: 15px;
text-align: center;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-color: #183397;
background-image: -webkit-gradient(linear, left top, left bottom, from(#183397), to(#1F42C3));
background-image: -webkit-linear-gradient(top, #183397, #1F42C3);
background-image: -moz-linear-gradient(top, #183397, #1F42C3);
background-image: -ms-linear-gradient(top, #183397, #1F42C3);
background-image: -o-linear-gradient(top, #183397, #1F42C3);
background-image: linear-gradient(to bottom, #183397, #1F42C3);
color: white;
-webkit-box-shadow: 2px 2px 4px 0px #000;
box-shadow: 2px 2px 4px 0px #000;
text-shadow: 2px 2px 3px #444;
font-size: 18px;
}
JavaScript
$(function(){
$(document).find(".fadeOutMe").fadeOut(3000, function(){
alert('done'); // do redirect here;
});
alert('tada'); // alert, but wrong!
});