JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<svg viewbox="0 0 130 130" class="circle">
  <filter id="dropshadow" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
  <feMerge> 
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge>
</filter>
  <circle cx="50" cy="50" r="50"/>
</svg>

SCSS

.circle{
  width:100px;
  display:block;
  circle{
    fill:#3a3b3c;
    box-shadow:0 0 3px #f0f;
    filter:url("#dropshadow");
    &:hover{
      filter:none;
    }
  }
  
}