JSFiddle - React, Tailwind, and code Playground

by daneren2005

HTML

<img src="https://test.plicbooks.com/css/images/image-placeholder.png" style="clip-path: url(#Mask-2); -webkit-clip-path: url(#Mask-2); width: 150px; height: 150px;">
<img src="https://test.plicbooks.com/css/images/image-placeholder.png" style="clip-path: url(#Mask-3); -webkit-clip-path: url(#Mask-3); width: 300px; height: 150px;">
<img src="https://test.plicbooks.com/css/images/image-placeholder.png" style="clip-path: url(#Mask-4); -webkit-clip-path: url(#Mask-4); width: 150px; height: 300px;">

<svg width="0" height="0" id="globalMaskDefinitions">
    <defs>
        <clipPath id="Mask-1" clipPathUnits="objectBoundingBox">
            <rect x="0" y="0" width="1" height="1" ry=".15px" rx=".2px" />
        </clipPath>

        <clipPath id="Mask-2" clipPathUnits="objectBoundingBox">
            <rect x="0" y="0" width="1" height="1" rx=".1px" ry=".1px" />
        </clipPath>
        
        <clipPath id="Mask-3" clipPathUnits="objectBoundingBox">
            <rect x="0" y="0" width="1" height="1" rx=".05px" ry=".1px" />
        </clipPath>
        
        <clipPath id="Mask-4" clipPathUnits="objectBoundingBox">
            <rect x="0" y="0" width="1" height="1" rx=".1px" ry=".05px" />
        </clipPath>
    </defs>
</svg>