JSFiddle - React, Tailwind, and code Playground

by jakie8

HTML

<a href="#" class="trash">
  <span class="lid"></span>
  <span class="can"></span>
</a>

CSS

.trash .can, .trash .lid {
    background: url('http://donkeystaging.net/static/img/trash.png') 0 0 no-repeat;
    left: 8px;
    position: absolute;
    right: 8px;
    top: 2px;
    }

.trash .lid {
    -webkit-transform-origin: -7% 100%;
    -moz-transform-origin: -7% 100%;
    -ms-transform-origin: -7% 100%;
    transform-origin: -7% 100%;
    
    height: 6px;
    width: 14px;
    
    -webkit-transition: all 150ms ease; 
    -moz-transition: all 150ms ease; 
    -o-transition: all 150ms ease; 
    transition: all 150ms ease;
    
    }

.trash .can {
    background-position: -1px -4px;
    height: 12px;
    margin-left: 1px;
    margin-right: 2px;
    margin-top: 4px;
    width: 11px;
}

.trash:focus > .lid,
.trash:hover > .lid {
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 

    -webkit-transition: all 250ms ease; 
    -moz-transition: all 250ms ease; 
    -o-transition: all 250ms ease; 
    transition: all 250ms ease; 
  
}