JSFiddle - React, Tailwind, and code Playground

by medusaman

HTML

<div class="area">
  <img src="https://tinyurl.com/ydz3kdka" alt="" />
</div>
<span class="sample" data-img="https://tinyurl.com/ydz3kdka"><p> Answers</p> </span>
<span class="sample" data-img="http://uploads.ru/4OD5S.png"><p>Vocabular</p></span>

CSS

body{background:#666; color:#eaeaea; font-family:sans-serif; font-weight:bold; font-size:16px; text-transform:uppercase;}

.sample:nth-of-type(1) {color: 	#FFFFFF;}

.sample:nth-of-type(2) {color: 	#FFFFFF;}

* {
  box-sizing: border-box;
}

.area {
  width: 700px;
  height: 800px;
  margin-bottom: 3px;
  border: 2px solid #333;
  
}

.area img {
  max-width: 200%;
  max-height: 150%;
}

.sample {
  display: inline-block;
  width: 150px;
  height: 55px;
  border: 3px solid #999;
}

.sample:nth-of-type(1) {
  background-color: #FFA500;
}

.sample:nth-of-type(2) {
  background-color: #32CD32;
}

JavaScript

var d = document,
  img = d.querySelector('.area img'),
  samples = [].slice.call(d.querySelectorAll('.sample'));

samples.forEach(function(el) {
  el.addEventListener('click', changeColor, false);
});

function changeColor() {
  var that = this;
  img.src = that.dataset.img;
  samples.forEach(function(el) {
    el.style.borderWidth = (el == that ? '3px' : '1px');
  });
}