JSFiddle - React, Tailwind, and code Playground

HTML

<div id="uno">
    
    Caja con sombra a los lados<br/>
    solamente!!!
</div>

<div id="dos">
    
    Caja con sombra a arriba/abajo<br/>
    solamente!!!
</div>
<div id="tres">
    
    Caja con sombra a los lados<br/>
    solamente!!!
</div>

<div id="cuatro">
    
    Caja con sombra arriba/abajo<br/>
    solamente!!!
</div>


<div id="cinco">
    
    Caja con sombra a los 4 lados<br/>
    !!!
</div>

CSS

div{float:left; margin:20px; width:200px;
    height:200px;}

#uno{  box-shadow: 3px 0px 4px #111,  -3px 0px 4px #111;  }

#dos{   box-shadow: 0px 3px 4px #111,  0px -3px 4px #111;}

#tres {box-shadow: 0px 3px 4px #999,  0px -3px 4px #999;}

#cuatro {box-shadow: 3px 0px 4px #999,  -3px 0px 4px #999;}

#cinco {box-shadow: 0px 0px 8px 1px #999}