JSFiddle - React, Tailwind, and code Playground

by Mateus Fernandes de Mello

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<div id="pry"></div>

CSS

#pry {
  overflow:hidden;
  clear:both;
}

.champ {
  position:relative;
  float:left;
}

.maestria {
  position:absolute;
  z-index:2;
}

.img-champ {
  position:absolute;
  z-index:1;
  width:72px;
  top:10px;
  left:3px;
}

JavaScript

var local = 'BR1';
var playerId = 6656809;
var apikey = 'db3639c2-6961-4f69-b66e-3c5a46914797';

$.getJSON("https://br.api.pvp.net/championmastery/location/" + local + "/player/"+ playerId +"/champions?api_key="+apikey,
	function(champions) {
  	console.log(champions);
		for	(i = 0; i < champions.length; i++) {
			var el = $('<div class="champ"><img src="http://mylolstats.esy.es/img/championicon/' + champions[i]['championId'] + '.png" class="img-champ" alt="champ"/><img src="http://mfmello.com/etc/bg.png" alt="Maestria"/></div>');
  		$('#pry').append(el);
		};
	}
);