JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<img src="https://images.unsplash.com/photo-1573674149281-35291c8c0980?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80">

<svg width="960px" height="560px" viewBox="0 0 960 560">
    <defs>
       <clipPath id="clip" clipPathUnits="objectBoundingBox" 
       transform="scale(0.00105, 0.00179)">
            <path d="M960,409.307V0H0v558.996l328.879-0.951c18.665,0,33.94-15.192,33.94-34.293l-0.585-79.815 c0-19.101,14.918-34.586,33.583-34.586L960,409.307z"/>
        </clipPath>
    </defs>
</svg>

CSS

body {
 margin: 0;
 padding: 0;
 
 background-color: #FAFAFA;
opacity: 1;
background-image:  linear-gradient(#F2F2F2 1.7000000000000002px, transparent 1.7000000000000002px), linear-gradient(to right, #F2F2F2 1.7000000000000002px, #FAFAFA 1.7000000000000002px);
background-size: 34px 34px;
}

img {
  max-width:100%;
  height: auto;
  clip-path: url(#clip);
}

svg {
  width: 0;
  height: 0;
  overflow: hidden;
}