JSFiddle - React, Tailwind, and code Playground

by Christian Bonato

HTML

<button id="t">Toggle the 'shadow' class</button>

<div id="box">Some content in the 'box' div.</div>

CSS

#box {
    width: 50px;
    height: 200px;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -kthtml-transition: all 1s linear;
    transition: all 1s linear;
}

.shadow {
    -webkit-box-shadow: 0px 0px 4px 2px #D50E0E;
    -moz-box-shadow: 0px 0px 4px 2px #D50E0E;
    box-shadow: 0px 0px 10px 20px #D50E0E;
    -webkit-transition: all 1s linear;
    -o-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -kthtml-transition: all 1s linear;
    transition: all 1s linear;
}

JavaScript

$('#t').click(
    function(){
        $('#box').toggleClass('shadow');
    });