JSFiddle - React, Tailwind, and code Playground

by Narcis

HTML

<div id="blue"></div>
<div id="red"></div>
<div id="orange"></div>

CSS

#blue {
	position:absolute;
	top:100px; right:100px;
	width:100px; height:100px;
	background-color: blue;
	cursor: pointer;
}
#red {
	position:absolute;
	top:100px; right:100px;
	width:100px; height:100px;
	background-color: red;
	cursor: pointer;
}
	
#green {
	position:absolute;
	top:250px; right:100px;
	width:100px; height:100px;
	background-color: green;
	cursor: pointer;
	display: none;
}

JavaScript

one();

	function one(){
		$("#blue").fadeOut("2000").delay(2000).fadeIn("2000");
		$("#red").fadeIn("2000").delay(2000).fadeOut("2000");
		setTimeout(one, 5000); 
	}

	$("#blue, #red").click(function() {
		$("#blue, #red").fadeOut("slow");
		$("#green").fadeIn("slow");
		one().stop();
	});
	
	$("#green").click(function() {
    	
    });