JSFiddle - React, Tailwind, and code Playground

by D S

HTML

<div class="loc1 hover">
                    <div class="loc1-title gw">
                        Glasgow
                        <div class="close"></div>
                    </div>
                    
</div>

CSS

.loc1-title{
    background-color:red;
    width:150px;
    height:30px;
}
.close{
    width:26px;
    height:26px;
    position:absolute;
    top:10px;
    left:-5px;
    background:#000 url(http://goo.gl/TdiVnE);
    
    -webkit-animation:spin 400ms linear 1 forwards;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg);margin-left:13px; } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

JavaScript

$(".close").hide();
    $(".ln, .gw, .mc, .rt, .nc").hover(function(){
       // var classname = $(this).parent();
       // var name = $(classname).children(':first-child').next();

        $(this).stop();
        $(this).animate({
            "padding-left": "30px"                        
         }, 500);

        $(this).find(".close").stop();
        $(this).find(".close").fadeIn(500);
    }, function(){
        //var classname = $(this).parent();
       // var name = $(classname).children(':first-child').next();

        $(this).stop();
        $(this).animate({
            "padding-left": "0px"                        
         }, 500);

        $(this).find(".close").stop();
        $(this).find(".close").fadeOut(400);
    });