JSFiddle - React, Tailwind, and code Playground

by mamounothman

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 169 67.25">
  <g style="isolation:isolate">
    <g>
      <g>
        <defs>
          <filter id="dropshadow" height="122%">
            <feGaussianBlur in="SourceAlpha" stdDeviation="0.3" /> 
            <feOffset in="blur" dx="0.7" dy="0.7" result="offsetBlur"/>
            <feOffset dx="1" dy="1" result="offsetblur" />
            <feFlood flood-color="#3D4574" flood-opacity="0.2" result="offsetColor"/>
            <feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"/>
          </filter>
        </defs>
        <use xlink:href="#path1" filter="url(#dropshadow)"></use>
        <path id="path1" d="M149.376,39.75l-49,23.5v-47Z" fill="#811818"/>
        <use xlink:href="#path2" filter="url(#dropshadow)"></use>
        <path id="path2" style="stroke: rgba(0,0,0,0.19); stroke-width: 0.2;" d="M149.376,39.75H6.688L30.279,22.274,6.624,4.75H149.376Z" fill="#b51c1c"/>
		    
      </g>
    </g>
  </g>
</svg>