JSFiddle - React, Tailwind, and code Playground

by UI Designer

HTML

<div class="black">
<a class="popup-close" data-popup-close="popup-1" href="#"><img src="http://optimumwebdesigns.com/icons/delete-cross.png" alt="" height="40px" width="40px" id="x-close"></a>
</div>

CSS

.black {
  background: #000;
  width: 100%;
  height: 400px;
 } 
.popup-close {
	position: absolute;
	top: 40px;
	right: 40px;
}
#x-close{
   -webkit-transition: -webkit-transform .8s ease-in-out;
  transition: transform .8s ease-in-out;
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%) ; 
}
#x-close:hover {
    -webkit-transform: translate(50%, -50%) rotate(180deg);
    transform: translate(50%, -50%) rotate(180deg); 
    
      
}