JSFiddle - React, Tailwind, and code Playground

by jigneshpanchalmj

HTML

<div class="img-container">
	<img src="https://i.stack.imgur.com/YrtiX.jpg" alt="" class="clip-svg">
  
  <img src="https://i.stack.imgur.com/YrtiX.jpg" alt="" class="clip-svg2" width="497" height="409">
  
</div>

<!-- here a svg frame code -->
<svg viewBox="0 0 497 409">
    <title>home-adventure-3</title>
    <g id="Home" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="V3-home" transform="translate(-745.000000, -2782.000000)">
            <g id="1M-Tweets" transform="translate(159.000000, 2433.000000)">
                <g id="Image" transform="translate(834.500000, 553.500000) rotate(-10.000000) translate(-834.500000, -553.500000) translate(612.000000, 386.000000)">
                	<clipPath id="myClip">
                    <path d="M439.60369,333.235779 C433.763322,333.706028 433.209857,332.153261 429.077322,332.001771 C425.566776,332.992765 417.212097,332.430991 411.355916,332.232161 C412.083326,331.866062 411.32956,331.559927 410.99221,331.193827 C407.407869,332.601417 408.704557,332.023863 404.276841,332.860211 L407.934978,333.478793 C404.962083,333.586098 402.511025,334.573936 399.849125,333.696559 C403.364942,335.142021 395.010263,334.583404 392.796405,335 C389.802426,334.435071 386.703025,335.369256 385.105884,334.488723 L385.517029,334.438227 L381.136753,334.182588 L381.748199,332.888616 C378.764762,332.317374 374.990661,333.201063 376.007982,333.617659 C372.855869,333.207375 374.732378,333.10007 374.315961,332.478332 C376.129217,332.115388 380.045637,331.070742 381.078771,332.159573 C380.83103,332.055424 380.161601,332.004927 379.998197,332.159573 C388.210556,332.945424 382.791875,330.63521 386.929681,330.395352 C384.79489,330.25333 383.234647,329.584252 380.915367,329.880919 C379.850607,329.884075 375.486144,330.297515 373.272286,330.717267 C376.308434,330.193366 377.810695,330.811948 380.140517,331.329537 C378.148044,331.178047 377.779068,331.903934 376.092319,331.439998 L376.666868,331.228544 L374.458281,331.648296...

CSS

body{margin:0;}
		.img-container {
			width: 300px;
			height: 300px;
			background-color: lightgreen; 
			margin:5px;
		}
		.clip-svg {
		  width:100%;
		  height:100%;
		  display:block;
		  object-fit:cover;
		  -webkit-mask:url('data:image/svg+xml;utf8,<svg viewBox="0 0 497 409"><title>home-adventure-3</title><g id="Home" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="V3-home" transform="translate(-745.000000, -2782.000000)"><g id="1M-Tweets" transform="translate(159.000000, 2433.000000)"><g id="Image" transform="translate(834.500000, 553.500000) rotate(-10.000000) translate(-834.500000, -553.500000) translate(612.000000, 386.000000)"><path d="M439.60369,333.235779 C433.763322,333.706028 433.209857,332.153261 429.077322,332.001771 C425.566776,332.992765 417.212097,332.430991 411.355916,332.232161 C412.083326,331.866062 411.32956,331.559927 410.99221,331.193827 C407.407869,332.601417 408.704557,332.023863 404.276841,332.860211 L407.934978,333.478793 C404.962083,333.586098 402.511025,334.573936 399.849125,333.696559 C403.364942,335.142021 395.010263,334.583404 392.796405,335 C389.802426,334.435071 386.703025,335.369256 385.105884,334.488723 L385.517029,334.438227 L381.136753,334.182588 L381.748199,332.888616 C378.764762,332.317374 374.990661,333.201063 376.007982,333.617659 C372.855869,333.207375 374.732378,333.10007 374.315961,332.478332 C376.129217,332.115388 380.045637,331.070742 381.078771,332.159573 C380.83103,332.055424 380.161601,332.004927 379.998197,332.159573 C388.210556,332.945424 382.791875,330.63521 386.929681,330.395352 C384.79489,330.25333 383.234647,329.584252 380.915367,329.880919 C379.850607,329.884075 375.486144,330.297515 373.272286,330.717267 C376.308434,330.193366 377.810695,330.811948 380.140517,331.329537 C378.148044,331.178047 377.779068,331.903934 376.092319,331.439998 L376.666868,331.228544 L374.458281,331.648296 C374.178913,330.868756 368.501948,331.190671 371.864904,330.357479 C368.892009,330.461628...