JSFiddle - React, Tailwind, and code Playground

by psycketom

HTML

<div id="svg-attachment">
    <svg>
        <!-- taken from http://stackoverflow.com/questions/6088409/svg-drop-shadow-using-css3 -->
        <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>
        
        <!-- traced in Illustrator, saved as SVG (http://apitecture.com/smiley_face.svg), and taken excerpt from it -->
        <g style="filter:url(#dropshadow); fill: rgb(0, 0, 255)">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M76.355,267.746c50.145,50.738,109.323,77.606,179.76,77.471
                c70.289-0.136,129.527-26.817,179.498-77.482c0,11.053-0.596,21.021,0.185,30.883c0.651,8.241-2.415,13.275-8.774,18.249
                c-35.693,27.909-74.764,48.385-119.815,56.175c-21.049,3.64-42.235,4.988-63.622,4.091c-28.626-1.202-56.48-5.952-83.25-16.386
                c-30.077-11.722-57.138-28.452-81.651-49.372c-1.035-0.882-2.216-2.348-2.23-3.557C76.294,294.872,76.355,281.923,76.355,267.746z"
                />
            <path fill-rule="evenodd" clip-rule="evenodd" d="M151.707,135.531c16.978,0,33.578,0,50.556,0c0,14.248,0,28.301,0,42.736
                c-16.739,0-33.457,0-50.556,0C151.707,164.195,151.707,150.143,151.707,135.531z"/>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M304.601,178.354c0-14.343,0-28.395,0-42.734c17.009,0,33.726,0,50.731,0
                c0,14.343,0,28.395,0,42.734C338.323,178.354,321.606,178.354,304.601,178.354z"/>
        </g>
    </svg>
</div>

CSS

#svg-attachment
{
    width: 100%;
    height: 100%;
    
    position: absolute;
    
    left: 0;
    top: 0;
    
    pointer-events: none;
}