JSFiddle - React, Tailwind, and code Playground

by ecmanaut

HTML

<!doctype html>
<html>
<head>
<style>
#target {
    height: 300px;
    width: 300px;
    background: #dd0;
    clip-path: url(#c1);
}
</style>
</head>
<body>
    <div id="target"></div>
    
    <svg>
        
        <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>
        
    </svg>
</body>
</html>