JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap_atletas_interno">
	<ul>
		<li class="atleta">
			<a href="teste.html">
				<div class="nome_86_atleta">Antônio</div>
				<img src="atletas/antonio_86px.jpg"/>
			</a>
		</li>
		<li  class="atleta">
			<div class="nome_86_atleta">Cauê</div>
			<img src="atletas/caue_86px.jpg"/>
		</li>
		<li class="atleta">
			<div class="nome_86_atleta">Dudu</div>
			<img src="atletas/dudu_86px.jpg"/>
		</li>
  </ul>
</div>

CSS

.wrap_atletas_interno img{
	line-height:0;
}

.wrap_atletas_interno li{
	float:left;
	margin-right:11px;
	border:3px solid #d0d2d6;
	line-height:0;
	position:relative;
   width:86px;
   height:86px;
}

.wrap_atletas_interno li .nome_86_atleta{
	position:absolute;
	width:75px;
	padding:8px;
	padding-right:0px;
	background:#d0d2d6;
	color:#243769;
	font-size:13px;
	font-style:italic;
	z-index:1;
	bottom:6px;
	left:0px;
}

.wrap_atletas_interno li.atleta_atual{
	border:3px solid #c91700;
}

.wrap_atletas_interno li.atleta_atual .nome_86_atleta{
	background:#c91700;
	color:#ffffff;
}


.wrap_atletas_interno li.ultimo{
	margin-right:0;
	margin-bottom:10px;
}

JavaScript

$('.atleta').click(function(e) {
			e.preventDefault();
			$('.atleta').removeClass('atleta_atual');
			$(this).addClass('atleta_atual');
			var h = $(this).attr('href');
			altert(h);
			$.get(h, function(data) {
				//$(".detalhes_atleta").html(data).fadeIn("slow");
        alert(h);
			});
});