JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/zachstronaut/jquery-css-transform/raw/master/jquery-css-transform.js"></script>
<script src="https://github.com/zachstronaut/jquery-animate-css-rotate-scale/raw/master/jquery-animate-css-rotate-scale.js"></script>
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<p id="wait">Please hold.<br /> Reticulating Splines...</p>

<div id="container" class="hidden">
    <h1>Wheel of badp!</h1>
    <img src="" alt="" />
    <p id="conclusion"><span>It's </span><span>badp's </span><span>fault. </span><strong>Obviously</strong></p>
</div>

CSS

body {
    color: white;
    font-family: Arial, sans-serif;
    background: #0D2239;
    text-align: center;
    padding: 0;
}

#wait {
    font-weight: bold;
    position: absolute;
    margin-top: 100px;
    font-size: 40px;
    line-height: 1.2em;
    width: 100%;
}

#container {
    width: 320px;
    margin: 30px auto;
}

#container h1 {
    font-size: 50px;
    font-weight: bold;
    margin-bottom: 10px;
    z-index: 1000;
    position: relative;
}

#container img {
    z-index: -1;
}

#conclusion {
    font-size: 30px;
    margin-top: 20px;
    z-index: 1001;
}

#conclusion > * {
    opacity: 0;
    position: relative;
}

strong {
    font-weight: bold;
}

.hidden {
    left: -9999px;
    position: absolute;
}

JavaScript

$('#container img').attr('src', 'http://www.gravatar.com/avatar/c81f585328c241594864f888f1154025?s=256').one('load', function() {
    console.log('Loaded!');
    $(this).animate({
        rotate: '+=' + (Math.random() * 920 + 1920) + 'deg'
    }, 5000, 'easeOutElastic', function(){
        $('#conclusion').children('span').each(function(i){
            $(this).delay(i * 600).fadeTo(400, 1);
        }).end().children('strong').delay(2600).fadeTo(500, 1);
        }).closest('#container').removeClass('hidden').hide().fadeIn(500).prev().fadeOut(500);
});