JSFiddle - React, Tailwind, and code Playground

by jimousse

HTML

<button>
  <svg xmlns="http://www.w3.org/2000/svg" width="12px" height="24px">
    <filter filterUnits="userSpaceOnUse" id="fe_forecast">
      <feColorMatrix type="matrix" values="0.1 0 0 0 0, 0 .1 0 0 0, 0 0 0.1 0 0, 0 0 0 1 0"></feColorMatrix>
    </filter>
    <path transform="translate(0,6)" d="M3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,-3.989422804014327,0A3.989422804014327,3.989422804014327,0,1,1,3.989422804014327,0" fill-opacity="0.4" fill="hsl(207,59%,56%)" stroke="hsl(207,59%,56%)" filter="url(#fe_forecast)" stroke-width="1" stroke-opacity="1"></path>
  </svg>
</button>