JSFiddle - React, Tailwind, and code Playground

by Andrey Izman

HTML

<div style="width:100px;height:100px;border:4px solid black;box-shadow:inset 0 0 10px black;margin:10px;"></div>

<svg viewBox="0 0 1000 100" preserveAspectRatio="none">
    <defs>
        <filter id="inset-shadow" >
            
            <feComponentTransfer in="SourceAlpha" 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="blur3" stdDeviation="15" />
            
            <feMerge result="blur">
                <feMergeNode in="blur" mode="normal"/>
                <feMergeNode in="blur2" mode="normal"/>
                <feMergeNode in="blur3" mode="normal"/>
            </feMerge>

            <feComposite operator="in" in="inset-selection" in2="blur" result="inset-blur"/>
 
            <feComposite operator="over" in="original-no-fill" in2="inset-blur"/>            
        </filter>
    </defs>
    <path d="M1000,0l-500,98l-500,-98l0,100l1000,0l0,-100Z" stroke="#ffe" stroke-width="1" fill="#ffe"></path>
    <path d="M1000,0l-500,98l-500,-98l0,200l1000,0l0,-100Z" stroke="#fff" stroke-width="1" fill="#fff" fill-opacity="40%" filter="url(#inset-shadow)"></path>
</svg>

CSS

body {
}