JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="15" height="15" 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>