JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="sh"></div>
    <div class="sh"></div>
</div>

CSS

.wrap {
    position: static;
}
.wrap.active {
    position: relative;
}
.sh {
    background-color: #f0f0f0;
    height: 100px;
    margin-bottom: 15px;
    transition: box-shadow .5s ease-in-out;
    width: 150px;
}
.wrap.active .sh {
    box-shadow: 0 3px 5px rgba(0,0,0,.3);
}

JavaScript

/*
 * Если свойство `position` контейнера меняется по классу,
 * то свойства потомков, которые должны плавно изменяться
 * меняются мгновенно
 */

var w = document.getElementsByClassName('wrap')[0];
w.addEventListener('click', function(){
    if (w.className === 'wrap') {
        w.className = 'wrap active';
    } else {
        w.className = 'wrap';
    }
}, false);