JSFiddle - React, Tailwind, and code Playground

by penholder

HTML

<div id="holder">
        <div class="big" id="uno"></div>
        <div class="big" id="dos"></div>
    </div>
    
    <div id="thumbs">
        <div class="thumb">rojo</div>
        <div class="thumb">amarillo</div>
        <div class="thumb">azul</div>
        <div class="thumb">verde</div>
        <div class="thumb">naranja</div>
    </div>

CSS

body{width: 650px;}

#holder{float: left;}

.big
{
	border: #333 solid 1px;
	float: left;
	height: 300px;
	margin: 5px;
	width: 300px;
}

#thumbs
{
	border: #666 solid 1px;
	float: left;
	padding: 5px;
	margin: 5px;
	width: 600px;
}

.thumb
{
	cursor: pointer;
	float: left;
	padding: 10px;
}

JavaScript

$(document).ready(function() 
{
    var colors = ['', 'red', 'yellow', 'blue', 'green', 'orange']
	//
	for(i=1; i <= colors.length; i++)
	{
		$('.thumb:nth-child('+ i +')').attr('destinoUno', colors[i]);
		$('.thumb:nth-child('+ i +')').attr('destinoDos', colors[i+1]);
		//
		$('.thumb').click(function(e)
		{
			e.preventDefault()
			//
			$('#uno').css('background', $(this).attr('destinoUno'));
			$('#dos').css('background', $(this).attr('destinoDos'));
		});
	}
	
});