JSFiddle - React, Tailwind, and code Playground

by Vivek kt

HTML

<svg width="350" height="75" viewBox="0 0 350 75">
    <title>Shadow</title>
    <rect x="0" y="0" width="350" height="75" style="fill: #09f"/>
    <g style="overflow:hidden; text-anchor: middle; font-size:72; font-weight: bold; font-family: Arial, Helvetica, sans-serif">
        <defs>
            <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
                <feGaussianBlur stdDeviation="0" result="shadow"/>
                <feOffset dx="6" dy="6"/>
            </filter>
        </defs>
    <text style="filter: url(#shadow); fill: black;font-size:72px" x="175" y="50">
    D
    </text>
    <text x="175" y="50" style="fill: white;font-size:72px">
    D
    </text>
    </g>
</svg>