JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="600" height="250" viewBox="0 0 600 250"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
      
    <filter id="gaussblur" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur stdDeviation="15" />
        </filter>    
 
    <filter id="morphdilate" x="-50%" y="-50%" width="200%" height="200%">
      <feMorphology operator="dilate" in="SourceGraphic" radius="15" />
    </filter>
      
   <filter id="morpherode" x="-50%" y="-50%" width="200%" height="200%">
      <feMorphology operator="erode" in="SourceGraphic" radius="15" />
    </filter>
      
  </defs>


    <circle r="50" cx="75" cy="100" fill="blue" stroke="none" filter="url(#gaussblur)"/>
         
    <circle r="50" cx="250" cy="100" fill="blue" stroke="none" filter="url(#morphdilate)"/>
         
    <circle r="50" cx="400" cy="100" fill="blue" stroke="none" filter="url(#morpherode)"/>


</svg>