JSFiddle - React, Tailwind, and code Playground

by Ksenia Polyakova

HTML

<div class="container">
  <img src="https://images.unsplash.com/photo-1484244233201-29892afe6a2c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2db8de5b9f0478ba59dfd9d61f4d64fe&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb" alt="kitten" class="pic" />
  <img src="https://images.unsplash.com/photo-1512873897628-eea05c840147?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e15fc03eb441dad7770ea11572272885&auto=format&fit=crop&w=2482&q=80" alt="kitten" class="pic" />
  <img src="https://images.unsplash.com/photo-1484244233201-29892afe6a2c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2db8de5b9f0478ba59dfd9d61f4d64fe&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb" alt="kitten" class="pic" />
  <img src="https://images.unsplash.com/photo-1508710599415-734cc9b287fb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=910717d33a9d13b890c1fb1e3130f186&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb" alt="kitten" class="pic" />
  <img src="https://images.unsplash.com/photo-1520008150259-a95a6e8df6cc?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=991ecf5991887fa243c76ebae5547b56&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb" alt="kitten" class="pic" />
  <img src="https://images.unsplash.com/photo-1493536122405-24f67df95909?ixlib=rb-0.3.5&s=5e9be84c542031fb765ac48ff9679d0d&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb" alt="kitten" class="pic" />
  <img src="https://images.unsplash.com/photo-1452873867668-7325bd9f4438?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjF9&s=cbdc4c2ec1e345307b7729f1e2b7a3af&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb" alt="kitten" class="pic" />
  <img src="https://images.unsplash.com/photo-1455525928928-837c99714248?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=2d71674cfff293aa496423f457b4c038&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb" alt="kitten" class="pic" />
  <img...

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.pic {
  width: 30vw;
  height: 30vw;
  outline: 3px solid silver;
  margin: 10px 0;
}

.pic-the-same {
  outline: 3px solid lime;
}

JavaScript

const pics = document.querySelectorAll('.pic');

const zhmak = new Event('zhmak', {
  bubbles: true,
  cancelable: true
});
document.addEventListener('zhmak', (e) => {
  addClass(e.target)
});

pics.forEach((item, i, arr) => {
  arr.forEach((pic, k) => {
    if (item.src === pic.src && i !== k) {
      item.dispatchEvent(zhmak);
    }
  })
});

function addClass(pic) {
  if (pic.tagName === 'IMG' && !pic.classList.contains('pic-the-same')) {
    pic.classList.toggle('pic-the-same');
  }
}