JSFiddle - React, Tailwind, and code Playground

by GCyrillus

HTML

<svg xmlns="http://www.w3.org/2000/svg" class="shape1" width="200" height="200" style="margin-top:-100px;">
    <circle cx="100" cy="50" r="100" fill="white"></circle>
    <foreignObject x="0" y="80" width="100%" height="100%">
        
        <body xmlns="http://www.w3.org/1999/xhtml">
            <div>
                 <h3 style="font-family:'myriad Pro' ">HOME</h3>

            </div>
        </body>
    </foreignObject>
</svg>

CSS

h3 {
    text-align:center;
}
body {
    background:#555;
}