JSFiddle - React, Tailwind, and code Playground

HTML

<svg class="svg" viewBox="0 0 75 19" fill="none" xmlns="http://www.w3.org/2000/svg">
  
 <defs>
  <linearGradient class="paint" id="paint" x1="22.7338" y1="4.42444" x2="-2.01181" y2="5.28104" gradientUnits="userSpaceOnUse">
    <stop stop-color="#9DED76"/>
    <stop offset="0.473958" stop-color="#4BCF70"/>
  </linearGradient>
</defs>
  
  
<path  d="M3.09872 10.5786L8.93571 16.73C10.0564 17.9111 11.9384 17.9111 13.0591 16.73L18.8961 10.5786C20.9965 8.36512 20.9965 4.77633 18.8961 2.56283C16.7957 0.349334 13.3903 0.349336 11.2899 2.56284C11.1309 2.73043 10.8639 2.73043 10.7049 2.56284C8.60448 0.349336 5.1991 0.349335 3.09872 2.56283C0.998343 4.77633 0.998344 8.36512 3.09872 10.5786Z" fill="#4BCF70" fill-opacity="0.15"  stroke="#3ACA6C" stroke-width="1.2"/>
 
  
 <path transform="translate(26,0)" d="M3.09872 10.5786L8.93571 16.73C10.0564 17.9111 11.9384 17.9111 13.0591 16.73L18.8961 10.5786C20.9965 8.36512 20.9965 4.77633 18.8961 2.56283C16.7957 0.349334 13.3903 0.349336 11.2899 2.56284C11.1309 2.73043 10.8639 2.73043 10.7049 2.56284C8.60448 0.349336 5.1991 0.349335 3.09872 2.56283C0.998343 4.77633 0.998344 8.36512 3.09872 10.5786Z" fill="#4BCF70" fill-opacity="0.15"  stroke="#3ACA6C" stroke-width="1.2"/>

 <path transform="translate(52,0)" d="M3.09872 10.5786L8.93571 16.73C10.0564 17.9111 11.9384 17.9111 13.0591 16.73L18.8961 10.5786C20.9965 8.36512 20.9965 4.77633 18.8961 2.56283C16.7957 0.349334 13.3903 0.349336 11.2899 2.56284C11.1309 2.73043 10.8639 2.73043 10.7049 2.56284C8.60448 0.349336 5.1991 0.349335 3.09872 2.56283C0.998343 4.77633 0.998344 8.36512 3.09872 10.5786Z" fill="#4BCF70" fill-opacity="0.15"  stroke="#3ACA6C" stroke-width="1.2"/>

</svg>

CSS

path:hover{
  fill-opacity: 1;
}

svg path {
  transition: 0.5s ease;
}