JSFiddle - React, Tailwind, and code Playground

HTML

<div class="button red"><span>Red Button</span></div>
<div class="button green"><span>Green Button</span></div>

CSS

.button {
    -webkit-box-shadow:  0px 8px 16px 0px;
    box-shadow:   0px 8px 16px 0px;
  
}
span{color:black}

.button:hover{
    -webkit-box-shadow:    0px 16px 16px 0px;
    box-shadow:   0px 16px 16px 0px;
}
/*And color elements does not have other values for the shadow*/

.red{
    color:red
}
.green{
   color:green
}