JSFiddle - React, Tailwind, and code Playground

by fliptheweb

HTML

<div></div>

SCSS

div {
    width: 100px;
    height: 100px;
    background: #000;
    animation: anim2 0.3s -0.3s;
    
    &.is-active {
        background: red;
        animation: anim .3s;
    }
}

@keyframes anim {
    to {
        background: blue;
    }
    from {
        background: green;
    }
}

@keyframes anim2 {
    to {
        background: gray;
    }
    from {
        background: white;
    }
}

CoffeeScript

document.querySelector('div').addEventListener('click', ->
    this.classList.toggle('is-active');
);