JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<svg width="300" height="300" viewBox="0 0 1 1" style="background: red">
  <path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z" >
  
  </path>
 
</svg>

CSS

path{
  fill: blue;
}

path:hover{
  fill: white;
}

path:active{
  fill: pin;
}