JSFiddle - React, Tailwind, and code Playground

by Serhii Matrunchyk

HTML

<svg>
  <defs>
    <clipPath id="svgPath">
      <rect width="296" height="46" x="0" y="0" rx="10"></rect>
    </clipPath>
    
    <filter id="dropshadow-legend" x="-2" y="-2" width="320" height="14">
      <feDropShadow dx="0" dy="1" stdDeviation="1" flood-color="rgba(0,0,0,0.15)"/>
      <feDropShadow dx="0" dy="0" stdDeviation="2" flood-color="rgba(0,0,0,0.06)"/>
    </filter>
  </defs>
  <rect width="500" height="500" fill="#fdfbed" x="0" y="0"></rect>
  <g transform="translate(50, 400)">
  <g transform="translate(10, 30)">
    <rect width="296" height="46" fill="#fff" x="0" y="0" rx="10" style="filter: url(#dropshadow-legend)"></rect>
    <rect width="296" height="46" fill="transparent" x="0" y="0" rx="10" stroke="green"></rect>
    <rect width="5" height="46" fill="green" x="0" y="0" stroke="green" clip-path="url(#svgPath)"></rect>
  </g>
  </g>
</svg>

CSS

html, body, svg {
  width: 100%;
  height: 100%;
}