JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<!-- Drop shadow trick for a PNG image with different shapes
http://stackoverflow.com/questions/3186688/drop-shadow-for-png-image-in-css/28939872#28939872
-->
<div class='container'>
   
    <img class='image-shadow' src='http://vignette4.wikia.nocookie.net/mario/images/c/c8/Golden_Coin_(New_Super_Mario_Bros.).png/revision/latest?cb=20110313000322' />
</div>

CSS

.container {
    width: 500px;
    height: 500px;
}
.container img {
    width: auto;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1
}
.container img.image-shadow {
    filter: blur(10px) brightness(-100);
    -webkit-filter: blur(10px) brightness(-100);
    opacity: .5;
    
    z-index: 0;
    top: 20px;
    left: 20px;
}