JSFiddle - React, Tailwind, and code Playground

HTML

<main>
  <div class="img-selector">
    <div class="sel item" data-target="1">1</div>
    <div class="sel item" data-target="2">2</div>
    <div class="sel item" data-target="3">3</div>
    <div class="sel item" data-target="4">4</div>
    <div class="sel item" data-target="5">5</div>
    <div class="sel item" data-target="6">6</div>
    <div class="sel item" data-target="7">7</div>
    <div class="sel item" data-target="8">8</div>
  </div>
  <div class="img-container">
    <img src="https://dummyimage.com/600x400/000/fff&text=1" data-img="1" alt="">
    <img src="https://dummyimage.com/600x400/000/fff&text=2" data-img="2" alt="">
    <img src="https://dummyimage.com/600x400/000/fff&text=3" data-img="3" alt="">
    <img src="https://dummyimage.com/600x400/000/fff&text=4" data-img="4" alt="">
    <img src="https://dummyimage.com/600x400/000/fff&text=5" data-img="5" alt="">
    <img src="https://dummyimage.com/600x400/000/fff&text=6" data-img="6" alt="">
    <img src="https://dummyimage.com/600x400/000/fff&text=7" data-img="7" alt="">
    <img src="https://dummyimage.com/600x400/000/fff&text=8" data-img="8" alt="">
  </div>
</main>

SCSS

*{
  box-sizing: border-box;
}

img{
  max-width: 100%;
  display: none;
  &.is-active{
    display: block;
  }
}

main{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  text-align: center;
}
.img-selector{
  background: #aaa;
  width: 100px;
  display:flex;
  flex-direction: column;
  justify-content: flex-start; 
  .item{
    width: 100%;
    background: #efefef;
    padding: 1em;
    border: 1px solid #000;
    transition: .1s ease-in-out;
    &:hover{
      background: #a99;
      cursor: pointer;
    }
  }
}

.img-container{
  max-width: 80%;
}

JavaScript

const $d = $(document);


$d
	.on('click','.img-selector .sel', (e)=>{
		$('.img-container img').removeClass('is-active');
    const $targetImgNum = $(e.target).data('target');
    $(`.img-container img[data-img="${$targetImgNum}"]`).addClass('is-active');
  });