JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<body class="container">
    <p></p>
    <div class="btn btn-lg btn-info" id="fadein">Fade In</div>
    <div class="btn btn-lg btn-success" id="fadeout">Fade Out</div>
    <div class="btn btn-lg btn-warning" id="fadeto4">Fade to .4</div>
    <div class="btn btn-lg btn-danger" id="fadeup">Fade to 1</div>
    <p></p>
    <div id="watch" class="jumbotron alert-success">
         <h2>Click The Fade Out</h2>

    </div>
</body>

JavaScript

$(document).ready(function () {

    $('#fadein').click(function () {
        $('#watch').fadeIn('slow');
    });
    $('#fadeout').click(function () {
        $('#watch').fadeOut('normal', function () {
            setTimeout(function () {
                $('#watch').removeClass('jumbotron alert-success').html('<h1>Boo Yeah!  Callback Triggered!</h1>')
                    .addClass('jumbotron alert-info').fadeIn(10)
            }, 1500);
        });
    });
    $('#fadeto4').click(function () {
        $('#watch').fadeTo('fast', 0.4);
    });
    $('#fadeup').click(function () {
        $('#watch').fadeTo('slow', 1.0);
    });

});