JSFiddle - React, Tailwind, and code Playground

by glebm

HTML

<div class="icon">
<span></span>
</div>
<div class="icon green">
<span></span>
</div>
<div class="icon red">
<span></span>
</div>

CSS

.icon {
    width: 60px;
    height: 60px;
    overflow: hidden;  
}
.icon.green > span {
    -ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(OffX=60, OffY=0, Color='green')";
    filter: drop-shadow(60px 0px green);
}
.icon.red > span {    
    -ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(OffX=60, OffY=0, Color='green')";
    filter: drop-shadow(60px 0px red);
}
.icon > span {
    -ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(OffX=60, OffY=0, Color='black')";
    filter: drop-shadow(60px 0px black);
    background-position: -100% 0;
    margin-left: -60px;
    display: block;
    width: 61px; /* +1px for chrome bug...*/
    height: 60px;
    background-image:...