JSFiddle - React, Tailwind, and code Playground

by Marcos vini

HTML

<div class="eloduo">
	<div>
		<h3>Selecione seu Elo desejado:</h3>
		<img src="https://elo-boost.net/images/tiers/silver_4.png" width="200" height="240"/>
	</div>
		
<div class="eloduo">
	</br>
		<b>LIGA DESEJADA:</b>
			</br>
	
			<select class="liga-duo">
		<option value="iron" selected="" function=onclick()>Ferro</option>
		<option value="bronze" function=onclick()>Bronze</option>
		<option value="silver" function=onclick()>Prata</option>
		<option value="gold" function=onclick()>Ouro</option>
		<option value="platinum" function=onclick()>Platina</option>
		<option value="diamond" function=onclick()>Diamante</option>
	</select>
</div>

CSS

.eloduo{
	margin-left: 570px;
}

.eloduo h3{
	margin-top: -493px;
	font-family: 'Pacifico', cursive;
	font-size: 20pt;
	margin-left: -50px;
}

.eloduo b {
	margin-left: -600px;
	font-size: 13px;
	font-family: 'Pacifico', cursive;
}

select.liga-duo{
	color: #161625;
	padding: 8px 80px;
	margin-left: -600px;
    height: 40px;
	font-size: 14px;
	border: 1px solid silver;
}

JavaScript

var seletor = document.querySelector('.liga-elo'); // select das ligas
seletor.addEventListener("change",function(){
alert(this.value);
});