JSFiddle - React, Tailwind, and code Playground

HTML

<div class="greyrow"> 
    good transition
    </div>
<br/>
<br/>
<div class="whiterow"> 
    no transition
    </div>

CSS

.greyrow{
height:100px;
width:250px;
padding:10px;
border:1px solid #CCCCCC;
margin-bottom: 10px;
-moz-box-shadow: inset 0 0 10px #aaa;
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inner 0 0 10px #aaa;
}

.greyrow:hover{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: -webkit-box-shadow 1s;
	-moz-transition: -moz-box-shadow 1s;
	-o-transition: -o-box-shadow 1s;
	transition: box-shadow 1s;


}

.whiterow{
height:100px;
width:250px;
padding:10px;
border:1px solid #CCCCCC;
margin-bottom: 10px;
-moz-box-shadow: inset 0 0 10px #aaa;
-webkit-box-shadow: inset 0 0 10px #aaa;
box-shadow: inner 0 0 10px #aaa;
}

.whiterow:hover{

-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
box-shadow: 0 0 10px #aaa;
-webkit-transition: -webkit-box-shadow 2s;
	-moz-transition: -moz-box-shadow 2s;
	-o-transition: -o-box-shadow 2s;
	transition: box-shadow 2s;


}