JSFiddle - React, Tailwind, and code Playground

by detailCode

HTML

<div style="height:260px;width:500px;overflow-x:hidden;background:#CCC;">
	<div style="height:250px;width:500px;position:relative;">
    	<div id="slide1" class="Panel" style="top:0px;left:0px;">
			<div>Slide 1</div>
            <div style="position:relative;margin-top:10px;width:225px;height:200px;">
            	<div class="ColorSquare" style="background-color:#093;left:0px;top:0px;"></div>
                <div class="ColorSquare" style="background-color:#C9F;left:100px;top:100px;"></div>
            </div>
        </div>
    	<div id="slide2" class="Panel" style="top:0px;left:310px;">
			<div>Slide 2</div>
            <div style="position:relative;margin-top:10px;width:225px;height:200px;">
            	<div class="ColorSquare" style="background-color:#CF9;left:0px;top:0px;"></div>
                <div class="ColorSquare" style="background-color:#C63;left:100px;top:100px;"></div>
            </div>
        </div>
    	<div id="slide3" class="Panel" style="top:0px;left:620px;">
			<div>Slide 3</div>
            <div style="position:relative;margin-top:10px;width:225px;height:200px;">
                <div class="ColorSquare" style="background-color:#696;left:0px;top:0px;"></div>
                <div class="ColorSquare" style="background-color:#F96;left:100px;top:100px;"></div>
            </div>
        </div>
        <div id="ShowColorSquare"></div>
    </div>
</div>
<div id="Lightbox"></div>

CSS

#Spin {
	width:50px;
	height:50px;
	margin: 15px 0px 15px 15px;
	background-color:#960;
	animation-name:Spin;
	animation-duration:5s;
	transform-origin:50% 50%;
	animation-iteration-count:infinite;
	
	-webkit-animation-name:Spin;
	-webkit-animation-duration:5s;
	-webkit-transform-origin:50% 50%;
	-webkit-animation-iteration-count:infinite;
}
@keyframes Spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@-webkit-keyframes Spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
.ColorSquare {
	height:100px;
	width:100px;
	position:absolute;
}
#ShowColorSquare {
	height:100px;
	width:100px;
	position:absolute;
	background-color:white;
	display:none;
}
#Lightbox {
	background-color:#000;
	width:100%;
	height:100%;
	position:fixed;
	top:0px;
	left:0px;
	opacity:.8;
	display:none;
	z-index:5;
}
.Panel {
	width:225px;
	height:250px;
	position:absolute;
	background-color:#6C6C6C;
}

JavaScript

jQuery(document).ready(function($) {
	RunFunction();

	$('.ColorSquare').click(function() {
		$('#Lightbox').css('display','block');
		$('#ShowColorSquare').css('display','block');
		$('#ShowColorSquare').css('z-index','10');
		$('#ShowColorSquare').css('left',$('#ShowColorSquare').parent().width() / 2 - 50);
		$('#ShowColorSquare').css('top',$('#ShowColorSquare').parent().height() / 2 - 50);
		$('#ShowColorSquare').html('The color is: ' + $(this).css('background-color'));
	});
	$('#ShowColorSquare').click(function() {
		$('#Lightbox').css('display','none');
		$('#ShowColorSquare').css('display','none');
		$('#ShowColorSquare').html('');
	});
	$('#Lightbox').click(function() {
		$('#Lightbox').css('display','none');
		$('#ShowColorSquare').css('display','none');
		$('#ShowColorSquare').html('');
	});
});
function RunFunction() {
	$('#slide1').animate({
		left: '-=310'
	}, 3000);
	$('#slide2').animate({
		left: '-=310'
	}, 3000);
	$('#slide3').animate({
		left: '-=310'
	}, 3000, function() {
		if($('#slide1').css("left") == '-310px') {
			$('#slide1').css("left",620);
		}
		if($('#slide2').css("left") == '-310px') {
			$('#slide2').css("left",620);
		}
		if($('#slide3').css("left") == '-310px') {
			$('#slide3').css("left",620);
		}	
		RunFunction(); 
	});
}