JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">My box with shadow</div>

CSS

.box {
    background: red;
    color: black;
    display: block;
    margin: 30px;
    padding: 20px;
    text-align: center;
    width: 150px;
 
    /*Transition*/
    -webkit-transition: -webkit-box-shadow 0.5s ease-out;
    -moz-transition: -moz-box-shadow 0.5s ease-out;
    -o-transition: box-shadow 0.5s ease-out;
}
 
.box:hover {
    -moz-box-shadow: 5px 10px 15px black;
    -webkit-box-shadow: 5px 10px 15px black;
    box-shadow: 5px 10px 15px black;
    /*
        5px steht für 'Schatten nach rechts'
        10px steht für 'Schatten nach unten'
        15px steht für die Abschwächung...
    */
}