JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="card a">
      <p>
        Card 1
      </p>
  </div>
  <div class="card b">
      <p>
        Card 2
      </p>
  </div>
  <div class="card c active">
      <p>
        Card 3
      </p>
  </div>
  <div class="card d">
      <p>
        Card 4
      </p>
  </div>
  <div class="card e">
      <p>
        Card 5
      </p>
  </div>
</div>

SCSS

.container {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 100px;
     
    .card {
      background-color: red;  
      color: #fff;
      width: 100px;
      height: 150px;
      text-align: center;
      display:inline-block;
      transition: 0.2s;
      
      
      &.active {
        transform: scale(1.4 , 1.4);
        position: relative;
        z-index: 100;
      }
      
      &.a {
        background-color: black;
      }
      
      &.b {
        background-color: blue;
        width: 120px;
        height: 170px;
      }
      
      &.c {
        background-color: red;
      }
      
      &.d {
        background-color: orange;
        width: 120px;
        height: 170px;
      }
      
      &.e {
        background-color: yellow;
      }
      
      &.size1 {
        transform: scale(1.1,1.1);
        z-index: 1;
      }
      
      &.size2 {
        transform: scale(1.15,1.15);
        z-index: -1;
      }
      
      &.size3 {
        transform: scale(0.9);
        z-index: -2;
      }
      
      &.size4 {
        transform: scale(0.8);
        z-index: -3;
      }
    }
}

JavaScript

$(".card").mouseover(function() {
		$(".card").removeClass('active');
    $(this).addClass('active');
});

$(".card").mouseout(function() {
		$(".card").removeClass('active');
    $(".c").addClass('active');
});

//

$(".a").mouseover(function() {
		$(".b").addClass('size1');
    $(".c").addClass('size2');
    $(".d").addClass('size3');
    $(".e").addClass('size4');
});

$(".a").mouseout(function() {
		$(".b").removeClass('size1');
    $(".c").removeClass('size2');
    $(".d").removeClass('size3');
    $(".e").removeClass('size4');
});

$(".b").mouseover(function() {
		$(".c").addClass('size1');
    $(".d").addClass('size2');
    $(".e").addClass('size3');
});

$(".b").mouseout(function() {
		$(".c").removeClass('size1');
    $(".d").removeClass('size2');
    $(".e").removeClass('size3');
});