JSFiddle - React, Tailwind, and code Playground

by Wolfsilver

HTML

<div style="width:100px;height:100px;border:4px solid black;box-shadow:inset 0 0 30px black;margin:10px;"></div>
<svg>
    <defs>
        <filter id="inset-shadow" >
            
            <feComponentTransfer in="SourceGraphic" result="inset-selection">
                <feFuncA type="discrete" tableValues="0 1 1 1 1 1"/>
            </feComponentTransfer>
            
            <feComponentTransfer in="SourceGraphic" result="original-no-fill">
                <feFuncA type="discrete" tableValues="0 0 1"/>
            </feComponentTransfer>
 
            <feColorMatrix type="matrix" in="original-no-fill" result="new-source-alpha" 
              values="0 0 0 0 0
                      0 0 0 0 0
                      0 0 0 0 0
                      0 0 0 1 0"
/>            
          
            <feGaussianBlur in="new-source-alpha" result="blur" stdDeviation="5" />
            <feGaussianBlur in="new-source-alpha" result="blur2" stdDeviation="10" />
            <feGaussianBlur in="new-source-alpha" result="blur4" stdDeviation="10" />
            <feGaussianBlur in="new-source-alpha" result="blur5" stdDeviation="10" />
            <feGaussianBlur in="new-source-alpha" result="blur3" stdDeviation="15" />
            <feGaussianBlur in="new-source-alpha" result="blur6" stdDeviation="15" />
            <feGaussianBlur in="new-source-alpha" result="blur7" stdDeviation="15" />
            <feGaussianBlur in="new-source-alpha" result="blur8" stdDeviation="15" />
            <feMerge result="blur">
                <feMergeNode in="blur" mode="normal"/>
                <feMergeNode in="blur2" mode="normal"/>
                <feMergeNode in="blur3" mode="normal"/>
                <feMergeNode in="blur4" mode="normal"/>
                <feMergeNode in="blur5" mode="normal"/>
                <feMergeNode in="blur6" mode="normal"/>
                <feMergeNode in="blur7" mode="normal"/>
                <feMergeNode in="blur8" mode="normal"/>
            </feMerge>

      ...