JSFiddle - React, Tailwind, and code Playground

by Wederson

HTML

<body>
    
</body>

CSS

.nope
{
opacity:0.25;
filter:alpha(opacity=25);
}

#artiststyle0 {
padding:3px;
display:inline-block;
}

#artiststyle {
  text-decoration:none;-o-box-shadow: 0px 2px 5px black;-moz-box-shadow: 0px 2px 5px black;-webkit-box-shadow: 0px 2px 5px black;box-shadow: 0px 2px 5px black; padding:4px;
    background-repeat: no-repeat;width:95px; height:95px; float:left;
  
  }  

#artiststyle:hover {
  text-decoration:none;-o-box-shadow: 0px 2px 5px black;-moz-box-shadow: 0px 7px 10px black;-webkit-box-shadow: 0px 7px 10px black;box-shadow: 0px 7px 10px black; padding:4px;
    background-repeat: no-repeat;width:95px; height:95px; float:left;opacity:0.9;
  

}
#artiststyle2 {

color:#fff; padding:2px; font-size:14px; background:#000; font-family:helvetica; font-weight:500; opacity:0.6;
}

JavaScript

$.ajax({
        type:'GET',
        datatype:'json',
        url:'http://ws.audioscrobbler.com/2.0/?method=artist.search&artist=a&api_key=b5bd5e1d31bf4188a6bcd329c964f6f2&limit=5&format=json',
        success :
            function(data){
                  $.each(data.results.artistmatches.artist, function(key, val) {
                $('body').append('<div id="artiststyle0"><a href="/p/?name=p.php?a='+val.name + '%26"><div id="artiststyle" style="background:url(' + val.image[2]["#text"] + ');background-size: 108px 108px;"><div id="artiststyle2">'+val.name + '</div></div></a></div>');
            });
        
        },
        complete: function(){
            alert("just completed the call");
        },
        error : function(e,d,f){
            console.log(f);
        },
    });