JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<img style="width: 200px; height: 200px; clip-path: url('#Mask'); -webkit-clip-path: url('#Mask');" src="http://goo.gl/aJmw77" />
<img style="width: 200px; height: 200px; filter: url(#drop-shadow); -webkit-filter: url(#drop-shadow);" src="http://goo.gl/aJmw77" />
<div style="width: 200px; height: 200px; display: inline-block; filter: url(#drop-shadow); -webkit-filter: url(#drop-shadow);">
    <img style="clip-path: url('#Mask'); -webkit-clip-path: url('#Mask');" src="http://goo.gl/aJmw77" />
</div>
<div style="width: 200px; height: 200px; display: inline-block; filter: drop-shadow(12px 12px 4px rgba(0,0,0,0.5)); -webkit-filter: drop-shadow(12px 12px 4px rgba(0,0,0,0.5));">
    <img style="clip-path: url('#Mask'); -webkit-clip-path: url('#Mask');" src="http://goo.gl/aJmw77" />
</div>
    
<svg id="globalMaskDefinitions" height="0" width="0">
    <defs>
        <clipPath clipPathUnits="objectBoundingBox" id="Mask">
            <polygon points=".5 0, .7 .3, 1 .38, .75 .65, .82 1, .49 .84, .18 1, .25 .65, 0 .38, .30 .30" />
        </clipPath>
        
        <filter id="drop-shadow">
            <feGaussianBlur in="SourceAlpha" stdDeviation="4" />
            <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>
    </defs>
</svg>