JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<div class="container">
  <div class="boxe placeholder"></div>
  <div class="active boxe" >1 tester</div>
  <div class="boxe" >2 tester</div>
  <div class="boxe" >3 tester</div>
  <div class="boxe" >4 tester</div>
  <div class="boxe" >5 tester</div>
  <div class="boxe" >6 tester</div>
  <div class="boxe" >7 tester</div>
  <div class="boxe" >8 tester</div>
  <div class="boxe" >9 tester</div>
  <div class="boxe" >10 tester</div>
</div>

CSS

.container {
  position: relative;
}

.boxe{
  width: 95px;
  height: 95px;
  cursor: pointer;
  background-color: #333;
  margin: 5px;
  display: inline-block;
}

.placeholder {
  width: 150px;
  height: 150px;
  float: left;
}

.active {
  position: absolute;
  top: 0;
  left: 0;
  
  background-color: red;
  width: 150px;
  height: 150px;
}

JavaScript

$('.container .boxe').click(function(){
  $('.boxe').removeClass('active');
  $(this).addClass('active');
});