JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <svg>
        <circle cx="135" cy="135" r="135"/>
        <path d="M0,135 L67.5,18.09 202.5,18.09 270,135, 202.5,251.91 67.5,251.91Z"/>
    </svg>
</div>

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: mistyrose;
}

div {
    width: 270px;
    height: 270px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -135px;
    margin-left: -135px;
    background-color: moccasin;
}

svg {
    height: 100%;
}

circle {
    fill: burlywood;
}

path {
    fill: darksalmon;
    stroke: brown;
    stroke-width: 2px;
}