JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">RGBA</div>
<div id="box" class="cradow">HEX</div>

CSS

#box{
    margin:40px auto;
    display:block;
    width:150px;
    height:150px;
    background:transparent;
    text-align: center;
    font-family: arial;
    line-height: 150px;
    
    -webkit-box-shadow:inset 0 20px 3px rgba(0,0,0,0.4);
    -moz-box-shadow:inset 0 20px 3px rgba(0,0,0,0.4);
    box-shadow:inset 0 20px 3px rgba(0,0,0,0.4);
}

#box.cradow{ /* Or crap shadow as I like to call it... */
    
    -webkit-box-shadow:inset 0 20px 3px #888 ;
    -moz-box-shadow:inset 0 20px 3px #888;
    box-shadow:inset 0 20px 3px #888;
}

.red{
    background-color:#888;
}

JavaScript

$(document).click(function(){
    $('body').toggleClass('red');
});