JSFiddle - React, Tailwind, and code Playground
by meo
HTML
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
<defs>
<linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="140.3398" y1="55.7695" x2="155.6935" y2="74.4232">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#C4C4C4"/>
</linearGradient>
<path id="mainForm" d="M161.919,1.97c-0.11-0.54-0.4-1.04-0.851-1.42c-0.46-0.37-1.01-0.55-1.55-0.55H104.62h-3.931H21.798
c-0.55,0-1.1,0.18-1.55,0.55c-0.46,0.38-0.74,0.88-0.85,1.42L0.048,94.02c-0.14,0.7,0.02,1.46,0.5,2.07
c0.48,0.6,1.19,0.91,1.9,0.91h130.891c0.54,0,1.08-0.18,1.53-0.54c0.46-0.37,0.75-0.86,0.859-1.39l3.79-35.89
c0.09-0.38,0.26-0.75,0.53-1.07c0.27-0.31,0.6-0.54,0.96-0.69l29.44-8.77c0.52-0.21,0.97-0.59,1.26-1.13
c0.28-0.53,0.35-1.12,0.24-1.68L161.919,1.97z"/>
<path id="corner" d="M172.169,48.36 L139.359,57.79 L135.689,96.2z"/>
<clipPath id="mainMask">
<use xlink:href="#mainForm" overflow="visible"/>
</clipPath>
<filter id="dropshadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/> <!-- stdDeviation is how much to blur -->
<feOffset dx="0" dy="0" result="offsetblur"/> <!-- how much to offset -->
<feMerge>
<feMergeNode/> <!-- this contains the offset blurred image -->
<feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
</feMerge>
</filter>
</defs>
</svg>
<svg version="1.1" id="form" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="172px" height="97px">
<use xlink:href="#corner" fill="url(#gradient)" />
<g clip-path="url(#mainMask)"...
CSS
svg {
float: left;
border: 1px solid red;
}