JSFiddle - React, Tailwind, and code Playground

by LW

HTML

<div id="imgWrap">
    <img id="img1" class="active" data-box="div1"/>
    <img id="img2" data-box="div2"/>
    <img id="img3" data-box="div3"/>
    <img id="img4" data-box="div4"/>
</div>

<div id="divWrap">
    <div id="div1" class="active">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <div id="div4">4</div>
</div>

SCSS

/*styling for this demo*/
body{margin:0;padding:0; box-sizing:border-box;}
#imgWrap,#divWrap{height:auto;width:100%;}
#img1,#img3{background:#b00;}
#img2,#img4{background:#d00;}
#div1{background:#077;}
#div2{background:#0b0;}
#div3{background:#b0b;}
#div4{background:#555;}
/*box attributes*/
img,div {
    //float:left;
    display:block;
    height:40px;
    width:100%;
    cursor:pointer;
    box-sizing:border-box;
}
#imgWrap .active{
    border:5px solid #58c;
}
/*fadeIn code*/
#divWrap div{
    /*display:none; Add display to remove reserved DOM space*/
    opacity:0;
    height:0;
}
#divWrap .active{
    /*display:block;*/
    height:40px;
    opacity:1;
    -webkit-animation:fadeUp ease-in-out 0.5s;
    animation:fadeUp ease-in-out 0.5s;
}
@-webkit-keyframes fadeUp{
	from{opacity:0;margin-top:30px;}
	to  {opacity:1;margin-top:0;}
}
@keyframes fadeUp{
	from{opacity:0;margin-top:30px;}
	to  {opacity:1;margin-top:0;}
}

JavaScript

$('img').on('click', function () {
  var divID = $(this).attr('data-box');
  $(this).addClass('active').siblings().removeClass('active');
  $('#' + divID).addClass('active').siblings().removeClass('active');
})