JSFiddle - React, Tailwind, and code Playground

by thindery

HTML

<img class="shadowed" src="https://papermusepress.scene7.com/is/agm/papermusepress/5x7Shape2?$Embed1_5x7Shape2=BABY_ANN_001_01&imageres=140&wid=525&hei=466&scl=1&fmt=png-alpha&qlt=90&op_usm=0.3,1&cropN=0.017857142857143,0.025,0.96428571428571,0.95" />

<svg height="0" xmlns="http://www.w3.org/2000/svg">
<filter id="drop-shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="2.2"/>
<feOffset dx="12" dy="12" result="offsetblur"/>
<feFlood flood-color="rgba(0,0,0,0.5)"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</svg>

CSS

oldimg { 
    -webkit-filter: drop-shadow(0px 0px 15px #222); 
    filter: drop-shadow(5px 5px 5px #222); 
filter: url(shadow.svg#drop-shadow);
}

.shadowed {
-webkit-filter: drop-shadow(0px 0px 15px #222);
filter: url(shadow.svg#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, 
Color='#222')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, 
Color='#222')";
}