JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Clique na área verde</h1>
	<div style="background-color: #FF0000; width: 200px; height: 200px; cursor: pointer;" id="red"></div>
	<div style="background-color: #00FF00; width: 200px; height: 200px; cursor: pointer;" id="green"></div>

JavaScript

$(document).ready(function() {
		
		var def = $.Deferred();

		$("div#green").on("click", def.resolve);

		$("div#red").on("click", def.reject);

		def.fail(function() {
			alert("Você clicou na área vermelha :-(");
		});
		
		def.done(function() {
			alert("Você clicou na área verde :-)");
		});

		def.always(function() {
			alert("Obrigado por testar!");
		});

	});