JSFiddle - React, Tailwind, and code Playground

HTML

<!--PHOTO 1-->
<div id="photo1">
    <div class="green"></div>
    <div class="yellow"></div>
    <div class="red"></div>
</div><!-- final photo1 -->

<!--PHOTO 2-->
<div id="photo2">
    <div class="green"></div>
    <div class="yellow"></div>
    <div class="red"></div>
</div><!-- final photo2 -->

<!--PHOTO 3-->
<div id="photo3">
    <div class="green"></div>
    <div class="yellow"></div>
    <div class="red"></div>
</div><!-- final photo3 -->

CSS

#photo1 {
    position:absolute;
    left:10px;
    top:10px;
    width:100px;
    height: 200px;
    font-size: 20px;
}

#photo2 {
    position:absolute;
    left:150px;
    top:10px;
    width:100px;
    height: 200px;
    font-size: 20px;
}

#photo3 {
    position:absolute;
    left:300px;
    top:10px;
    width:100px;
    height: 200px;
    font-size: 20px;
}

.green {
    position: absolute;
    top: 0px;
    left: 0px;
    width:100px;
    height: 200px;
    background-color:#0F0; /*green*/
    z-index: 3;
}
.yellow {
    position: absolute;
    top: 0px;
    left: 0px;
    width:110px;
    height: 210px;
    background-color:#FF0; /*yellow*/
    z-index: 2;
}
.red {
    position: absolute;
    top: 0px;
    left: 0px;
    width:120px;
    height: 220px;
    background-color:#F00; /*red*/
    z-index: 1;
}

#1 {
    position:absolute;
    left:10px;
    top:300px;
    width:20px;
    height: 20px;
    font-size: 40px;
}

JavaScript

$(function(){
           
    $("#green").click(function() {
        $(this).siblings(".red").fadeOut("slow");
        $(this).parent().not(this).children(".red").fadeIn("slow");
    });
    
})