JSFiddle - React, Tailwind, and code Playground

by Rafael Nepomuceno

HTML

<button id="t">Toggle the 'shadow' class</button>
<div id="box">Some content in the 'box' div.</div>fgeer t

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 4px 2px #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');
});