JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div id="color">
  <label><i></i><input checked type="radio" name="color" data-image="https://yt3.ggpht.com/-ly0A8oqWZjY/AAAAAAAAAAI/AAAAAAAAAAA/zLw3flqrG9c/s100-c-k-no/photo.jpg" value="red">Red</label>
  <label><i></i><input type="radio" name="color" data-image="https://yt3.ggpht.com/-P10_mldi90U/AAAAAAAAAAI/AAAAAAAAAAA/60v7G-LQ1Pg/s100-c-k-no/photo.jpg" value="green">Green</label>
  <label><i></i><input type="radio" name="color" data-image="https://yt3.ggpht.com/-Tdf9qE2tUuE/AAAAAAAAAAI/AAAAAAAAAAA/-vtxDcjx19M/s100-c-k-no/photo.jpg" value="blue">Blue</label>
</div>
<div id="description">
  Text text text color: <span></span>
</div>
<div id="image">
  <img src="" alt="">
</div>

CSS

label{
  display:block;
}
i{
  width:16px;
  height:16px;
  display:inline-block;
}
#image img{
  display:block;
  max-width:100%;
}

JavaScript

function changeInfo(){
	var text = document.querySelector("#color input[checked]");
  document.querySelector("#description span").innerHTML = text.value;
  document.querySelector("#image img").src = text.getAttribute("data-image");
  alert("qq");
 }

var colors = document.querySelectorAll("#color input");
for(var i = 0, l = colors.length; i < l; i++){
	colors[i].previousElementSibling.style.background = colors[i].value;
  colors[i].addEventListener("change", changeInfo);
}
 changeInfo();