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 fadeInOut {
    0% {
        opacity: 0;
    }
    16% {
        opacity: 1;
    }
    84% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fadeInOut {
    0% {
        opacity: 0;
    }
    16% {
        opacity: 1;
    }
    84% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
.message {
    width: 400px;
    margin: 0 auto;
    opacity: 0;
    text-align: center;
    -webkit-animation: fadeInOut 6s;
    animation: fadeInOut 6s;
}