JSFiddle - React, Tailwind, and code Playground

by Rob Crowther

HTML

<svg>
    <defs>
    <clipPath id="c1">
      <circle cx="60" cy="60" r="50"/> 
    </clipPath>
    <filter id="dropshadow" height="130%">
      <feGaussianBlur in="SourceAlpha" stdDeviation="3"/>
        <feOffset dx="2" dy="2" result="offsetblur"/>
        <feMerge>
          <feMergeNode/>
          <feMergeNode in="SourceGraphic"/>
       </feMerge>
    </filter>

    </defs>
    <g filter="url(#dropshadow)">
        <foreignObject width="300" height="300" clip-path="url(#c1)">
            <body>
                <div id="target"></div>
            </body>
        </foreignObject>
    </g>
</svg>

CSS

svg #target {
    height: 300px;
    width: 300px;
    background: #dd0;
}