JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<img style="width: 95px; height: 90px; clip-path: url('#Mask-4');" src="https://test.plicbooks.com/ajax/getPhoto.php?id=99a9da72-1b17-4200-8338-8d2196827a78&photo_name=101.png&opts[w]=300" />
<p/>

<div style="width: 95px; height: 90px; display: inline-block; position: relative; border: 2px solid red;">
    <img style="width: 100%; height: 100%; clip-path: url('#Mask-4');" src="https://test.plicbooks.com/ajax/getPhoto.php?id=99a9da72-1b17-4200-8338-8d2196827a78&photo_name=101.png&opts[w]=300">
</div>

<p/>
<div style="width: 95px; height: 90px; display: inline-block; position: relative;">
    <img style="width: calc(100% - 8px); height: calc(100% - 8px); position: absolute; left: 4px; top: 4px; clip-path: url('#Mask-4');" src="https://test.plicbooks.com/ajax/getPhoto.php?id=99a9da72-1b17-4200-8338-8d2196827a78&photo_name=101.png&opts[w]=300">
    <div style="width: 100%; height: 100%; top: 0; left: 0; position: absolute;  z-index: -2; background-color: #fadf0b; clip-path: url('#Mask-4-Background');"></div>
    <div style="width: calc(100% - 8px); height: calc(100% - 8px); top: 4px; left: 4px; position: absolute;  z-index: -1; background-color: white; clip-path: url('#Mask-4-Background');"></div>
</div>
    
<svg id="globalMaskDefinitions" height="0" width="0">
    <defs>
        <clipPath clipPathUnits="objectBoundingBox" id="Mask-4">
            <polygon points=".5 0, .7 .3, 1 .38, .75 .65, .82 1, .49 .84, .18 1, .25 .65, 0 .38, .30 .30" />
        </clipPath>
        <clipPath clipPathUnits="objectBoundingBox" id="Mask-4-Background">
            <use xlink:href="#Mask-4-Polygon" x="0" y="0" />
        </clipPath>
        <polygon id="Mask-4-Polygon" fill="none" stroke="#fadf0b" stroke-width="4" points=".5 0, .7 .3, 1 .38, .75 .65, .82 1, .49 .84, .18 1, .25 .65, 0 .38, .30 .30" />
    </defs>
</svg>
<svg width="0" height="0">
    <defs>
        <clipPath id="outerClip" clipPathUnits="objectBoundingBox"></clipPath>
    </defs>
</svg>
<svg width="95" height="90"...

CSS

.test {
    fill: white;
    stroke:red;
    stroke-width:10;
}
body {
    background-color: grey;
}