JSFiddle - React, Tailwind, and code Playground

HTML

<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>
  <img id="img1" class="shadowed" src="http://static.grayghostvisuals.com/imgblog/dropbox.png">

CSS

body
{
    background-color:lightblue;
}

.shadowed {
    filter: url(shadow.svg#drop-shadow);
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
-webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));

-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
Color='#444')";

}