JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<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>

<div style="position: relative; 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));">
    <div style="width: 100%; height: 100%; clip-path: url('#Mask'); -webkit-clip-path: url('#Mask'); overflow: hidden; position: relative;">
        <img style="position: absolute; width: 200%; height: 200%; left: -50%; top: -50%" src="http://goo.gl/aJmw77" />
    </div>
</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>
    </defs>
</svg>