JSFiddle - React, Tailwind, and code Playground
HTML
<svg width="115" height="115" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient id="tweak-smile-gradient" gradientTransform="rotate(90)">
<stop offset="10%" stop-color="#feff96"/>
<stop offset="95%" stop-color="#d1c000"/>
</linearGradient>
<circle id="face" cx="50" cy="50" r="50" fill="url('#tweak-smile-gradient')"/>
<clipPath id="inside-face">
<use xlink:href="#face"/>
</clipPath>
</defs>
<use
xlink:href="#face"
stroke-width="10" stroke="#555" fill="none"
clip-path="url(#inside-face)"/>
<circle cx="34" cy="38" r="8" fill="#333" />
<circle cx="66" cy="38" r="8" fill="#333" />
<path d="M20 55 C20 80 80 80 80 55" stroke-linecap="round" stroke="black" stroke-width="5" fill="none" />
</svg>