JSFiddle - React, Tailwind, and code Playground

by hexen77

HTML

<div>
  <img id="content-1" class="position-1" src="https://www.gstatic.com/webp/gallery/1.sm.jpg">
  <img id="content-2" class="position-2" src="https://www.gstatic.com/webp/gallery/2.sm.jpg">
  <img id="content-3" class="position-3" src="https://www.gstatic.com/webp/gallery/3.sm.jpg">
  <img id="content-4" class="position-4" src="https://www.gstatic.com/webp/gallery/4.sm.jpg">
</div>

CSS

.position-1 {
	position: absolute;
    left: 30%;
    transform: scale(1.1);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.position-2 {
	opacity: .4;
    position: absolute;
    z-index: -2;
    left: 10%;
}
.position-3 {
	opacity: .4;
    right: 10%;
    position: absolute;
    z-index: -2;
}
.position-4 {
	opacity: 0;
    z-index: -10;
    left: 30%;
    position: absolute;
}

JavaScript

$("#content-2.position-2").click(function() {
  $("#content-2.position-2").addClass(" position-1");
    $("#content-2.position-2").removeClass("position-2 ");
    $("#content-3.position-3").addClass(" position-4");
    $("#content-3.position-3").removeClass("position-3 ");
    $("#content-4.position-4").addClass(" position-2");
    $("#content-4.position-4").removeClass("position-4 ");
    $("#content-1.position-1").addClass(" position-3");
    $("#content-1.position-1").removeClass("position-1 ")
});
$("#content-4.position-2").click(function() {
  $("#content-4.position-2").addClass(" position-1");
    $("#content-4.position-2").removeClass("position-2 ");
    $("#content-2.position-1").addClass(" position-3");
    $("#content-2.position-1").removeClass("position-1 ");
    $("#content-1.position-3").addClass(" position-4");
    $("#content-1.position-3").removeClass("position-3 ");
    $("#content-3.position-4").addClass(" position-2");
    $("#content-3.position-4").removeClass("position-4 ")
});