JSFiddle - React, Tailwind, and code Playground

HTML

-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" style="enable-background:new 0 0 216 216;" xml:space="preserve">
  <filter id="fade" height="150%" width='150%'>
     <feMerge>
      <feMergeNode/>
      <!-- this contains the offset blurred image -->
      <feMergeNode in="SourceGraphic" />
      <!-- this contains the element that the filter is applied to -->
    </feMerge>
  </filter>
  <filter id="dropshadow" height="150%" width='150%'>
    <feGaussianBlur in="SourceAlpha" stdDeviation="25" />
    <!-- stdDeviation is how much to blur -->
    <feOffset dx="0" dy="15vh" result="offsetblur" />
    <!-- how much to offset -->
    <feComponentTransfer>
      <feFuncA type="linear" slope="0.4" />
    </feComponentTransfer>
    <feMerge>
      <feMergeNode/>
      <!-- this contains the offset blurred image -->
      <feMergeNode in="SourceGraphic" />
      <!-- this contains the element that the filter is applied to -->
    </feMerge>
  </filter>
  <a href='' id='playvideo_button'>
    <g>
      <path class="st0" d="M108,24c-46.4,0-84,37.6-84,84s37.6,84,84,84s84-37.6,84-84S154.4,24,108,24z" />
      <polygon class="st1" points="92,140 92,76 140,108" />
    </g>
  </a>
</svg>

CSS

svg {
  width: 30vw;
  height: 30vh;
  cursor: pointer;

}

svg .st0 {
  fill: #4982CF;
  transition: filter.6s ease-out;
  filter: url(#dropshadow);
}
svg .st1 {
  fill: #ffffff;

}
svg:hover .st0{
  filter: url(#fade);
}