JSFiddle - React, Tailwind, and code Playground

by Michael Dibbets

HTML

<div class="uiicon icon1 uiicon-filter-darkgreen-dropshadow"><img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=c4222387135a"/></div>

CSS

.uiicon {
	width:64px;
	height:64px;
	display:inline-block;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;    
    
}
.uiicon-filter-darkgreen-dropshadow {
	
	-webkit-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2));
	-moz-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2));
	-o-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2));
	-ms-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2));
	filter:invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(4px 4px 7px rgba(0,0,0,0.2));
}
.uiicon-filter-darkgreen-dropshadow:hover {
	-webkit-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5));
	-moz-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5));
	-o-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5));
	-ms-filter: invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5));
	filter:invert(33%) sepia(89%) hue-rotate(95deg) saturate(255%) drop-shadow(0px 0px 7px rgba(0,0,0,0.5));
	cursor:pointer;
	cursor:hand;
}

.icon1 {
    background-image: url("http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=c4222387135a");
 	background-image:url("http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=1bc768be1b3c"),none;
    background-position: top left;
  background-repeat: no-repeat;
    width: 200px;
  height: 50px;