JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<div class="blue">Кликай<br>Синий 50%-прозрачность</div>
<div class="red">Кликай<br>Красный 50%-прозрачность</div>

<div class="pictures">
	<div class="pic"></div>
</div>

CSS

html, body{margin: 0px 0px 0px 0px;width:  100%;background: #4CAF50;}

.pictures{
	width: 270px;
	height: 400px;
	margin: 0px auto;
}

.pic{
	width: 100%;
	height: 100%;
	background: #FF9800;
	background-image: url(https://lh3.googleusercontent.com/bOweMaFMIxsOaVgZKytIuAGIk39oRRjF2fdp6ymOFWF8e-UPp5UYLa24dhyyNRjsdr8TVkPZDcuE6f39Sv0wwb48UjHRYmXrFPmAMZKrrnmnQuyyIvGrLxAV_y6V0pC6jHExYMLnbv2Y2g7yma5iKkCroppoFnUcl3meKEEp6WGtmiLIr2VCnTTGoNv1ciDLkCgIAPO6vcZ2WK1MeyA10whj19W-r3iExoz0vwe_PsujGvTkS8yMFWh95HQJ-opJr9Ho9Gzv0_pPme8ul8QcBFgf1IAKvB80sIN-KL9xuY6T_iXEdt14OYpJ80VWKwiWIzq6zvpzZvZi8y27LMnuOfPjl6yDiM3NLoobupi5ECTn5OJxsRkRIepmudMSWzijwjnRV2veDXiA-2xq5cCHZXLOK28sQGLc-ftlLnqxTaak1XCCcXUliO-j9M4Y04p_x-AwPdgQrrvJh25nfX2su_kPaDruTaxD9Ar3khIPq0nGTaFerMjscm5mUXZ8VsFg--6n4GVxZY945AUB6m6Oz3Iai3DXIj2wnw3T0I_-oeD7yCorGs53yTvNnG0Qux3j=w1920-h959);
	background-repeat: no-repeat;
	background-size: 270px;
	background-position: 0px 0px;
}

img{
	width: 270px;
	height: 406px;
}

.blue{
	width: 220px;
	height: 50px;
	background: #5b5be9;
	cursor:  pointer;
	margin-top: 10px;
	margin-top: 10px;
	color: #fff;
	text-align: center;
	padding-top: 5px;
	border-radius: 30px;
	font-family: Comic Sans MS;
	font-size: 15px;
}

.red{
	width: 220px;
	height: 50px;
	background: #cb5a58;
	cursor:  pointer;
	margin-top: 10px;
	color:  #fff;
	text-align:  center;
	padding-top: 5px;
	border-radius: 30px;
	font-family: Comic Sans MS;
	font-size: 15px;
}

JavaScript

var blue = document.getElementsByClassName('blue')[0];
var red = document.getElementsByClassName('red')[0];

blue.addEventListener('click',function(){
	document.getElementsByClassName('pic')[0].innerHTML = '<img src="https://lh3.googleusercontent.com/3lK_61XIXtjT-P6NVvBygnEwmOZ7N_YvbtGEUfKIMsyKg7wX0LvPwOCIrY1vEGjWRuzR_qYvLhE2YFeTV26TQ-BgTd30HL7bugikmqh3lN72qWOhE9R69eQMqCLnmK-IZNwWKcJjOGRDv4047mVivpTgWG0aigrVM_LMbSPlqYLVUaxrhaXEflaWcKh8e7CUZwhtbTxT9kYKBF9isO0zD9oAhtM-Hvzpssd8L_y3ubpoCMvteiibJYnVw0LGLZSICO_xOHPIiyI4pg1T9j90E_Csc8esDjmn53Jkn9Amtikxf9kCCWfvwe3HWsu19ZhF_1VGbmPNkDJzCjtRD6cnPi3YnfKDD6d0D2-HFqmWsYVhN6vqlhYkICVPpxvXMyiYJpYgLOAepTRJh4h1eb4-NPASz-oFrCJGWflf9DV46H-gCTPFqyEiaZJHTe9i_jUTx8WuSAbShqhmBEG1vPipLu_B1GZRLkYnt0wdwgYicdp06o8YgKbqa_yDArO7ooXLtLasiApNrBqjt61CbKiDxVgTlk_myU3sl9h3WXZtHW4yq3EhOb04YFhxB334MMqY=w1920-h959">';
},false);

red.addEventListener('click',function(){
	document.getElementsByClassName('pic')[0].innerHTML = '<img src="https://lh3.googleusercontent.com/Nq6CO5DZhbU3vSWG6b1Wxdun8yLq4SQjm-WTpZyDuDk9YDvSjCneeVUl7EDQRMwaXo6Tz8_Ew5o0yF2U-FlQicZwv7NouSppSSpSaXdsP0Gs0L2w7rd0FjpVHQB6gJ_YCKKhvXfoSudI4pfwuJSw__EplZnA46zkngIL19-Z-6-kxUFujjp2jWex5zXyZ2qbw_NFEgyHYxxH5PdGMOeFy4RGBazAiS4uYKBQLwxjCr5rGJgA5b0WCfT5Ixu-QMPYb_RAw-cJVXGCUSBATtrKSWksMtZJ_0ShL_H6vMDS-dlUZw9UBNtSvABT4zeVpSUng2Cv_iq-zm6HAREbdP9fMYd06NanUWJO4IP-xQPWnLJ5IVHJ9QRCZ0z7qt2_U11GBJcLkGWk1XCM3KW0vcjg_g5vUTcVMHq6VrWMvAzAXdrfhfGPrsvtnNP0Os2v2CkoAeycznulARl9118paotCgYFVRke4i9skIHGmyHKSSH4qw9iZS9AooOxnN4W4afq-WfqnqpRIqAOhUAtroxicQwzntc9h7PyHnudcWowcmCIafTOKL5MWXVl__haX6b1u=w1920-h959">';
},false);