JSFiddle - React, Tailwind, and code Playground

by mischah

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>
<div></div>
<button id="in">FadeIn</button>
<button id="out">FadeOut</button>

CSS

div {
    position:absolute;
    width:100px;
    height:100px;
    background:transparent;
    top:100px;
    transition: background 1s ease-in;
}

.differentColor { background: orange; }

JavaScript

(function() {
    var container = $('div');

    $('#in').click(function() {
        container.addClass('differentColor');
    });

    $('#out').click(function() {
        container.removeClass('differentColor');
    });
})();