JSFiddle - React, Tailwind, and code Playground

by Mario Nebl

HTML

<div class="message">
     <h1><font size="+6"> :(</font></h1>

    <br />
     <h1>Whoops<span>Something went wrong</span></h1>

    <br />
     <h1><span><div id="timer_div">you will be redirected in</div> seconds</span></h1>

</div>

CSS

@-webkit-keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.fadeIn {
    -webkit-animation: fadeIn;
    animation: fadeIn;
    opacity: 1;
}

.fadeOut {
    -webkit-animation: fadeOut;
    animation: fadeOut;
    opacity: 0;
}

.fast {
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

.message {
    width: 400px;
    margin: 0 auto;
    text-align: center;
}

JavaScript

var $message = $('.message');
$message.addClass('fadeIn fast');

setTimeout(function(){
   $message.removeClass('fadeIn').addClass('fadeOut');
}, 5000);