JSFiddle - React, Tailwind, and code Playground

by YangHax

HTML

<div style="width: 96px; height: 96px; background: black;">
    <svg xmlns="http://www.w3.org/2000/svg">
        <radialGradient id="g">
            <stop offset="0" stop-color="gray" style="stop-opacity: 1"/>
            <stop offset="0.3" stop-color="white" style="stop-opacity: .5"/>
            <stop offset="0.4" stop-color="white" style="stop-opacity: .1"/>
            <stop offset="0.55" stop-color="white" style="stop-opacity: 0"/>
            <stop offset="0.7" stop-color="#b2b2b2" style="stop-opacity: .9"/>
            <stop offset="0.77" stop-color="#b2b2b2" style="stop-opacity: .6"/>
            <stop offset="0.8" stop-color="gray" style="stop-opacity: .7"/>
            <stop offset="0.83" stop-color="white" style="stop-opacity: .8"/>
            <stop offset="0.95" stop-color="white" style="stop-opacity: .1"/>
            <stop offset="1" stop-color="black" style="stop-opacity: 0"/>
        </radialGradient>
        <rect x="2.5%" y="2.5%" width="95%" height="95%" fill="url(#g)" />
    </svg>
</div>