JSFiddle - React, Tailwind, and code Playground

HTML

<div id="icon_box" class="clearfix">
                        <div class="icon">
                        <div class="box"></div>  
                        <p>FIrst Text</p>
                        </div>
                        <div class="icon">
                        <div class="box"></div> 
                        <p>second Text</p>
                        </div>
                        <div class="icon">
                        <div class="box"></div>    
                        <p>third Text</p>
                        </div>
                        <div class="icon">
                        <div class="box"></div>   
                        <p>fourth Text</p>
                        </div>
                        <div class="icon">
                        <div class="box"></div>   
                        <p>fifth text</p>
                        </div>
                        <div class="icon">
                        <div class="box"></div>    
                        <p>sixth text</p>
                        </div>
                        <div class="icon">
                        <div class="box"></div>    
                        <p>seventh text</p>
                        </div>
                        <div class="icon">
                        <div class="box"></div>   
                        <p>8th text</p>
                        </div>
</div>           

<div class="text">
                <p></p>
            </div>

CSS

#icon_box{
    clear:both;
}
.icon {
    width:120px;
    height:120px;
    margin:20px;
    float:left;
}
.box{
    width:100px;
    height:100px;    
    float:left;
    background: red;
}
.icon p {
    display:none;
}
.active {
    width: 120;
    height:120;
}
.text {
    clear:both;
}

JavaScript

var defaultHeading = null;

$("#icon_box .box").hover(
  function () {
    $(this).stop().animate({
        width: 120,
        height:120
        },200);    
    var ffff = $(this).next('p').html();
    $(".text p").html(ffff);
  },
  function () {
    if(!$(this).hasClass('active')) {
      $(this).stop().animate({
        width: 100,
        height: 100
        },1000);  
      $(".text p").html(defaultHeading);  
  }      
  });
 $("#icon_box .box").click(function(){
     if($(this).hasClass("active")) return;
    $(".active").stop().animate({
        width: 100,
        height: 100
    },1000);
    $("#icon_box .box").removeClass('active');
    $(this).addClass('active');
    var heading = $(this).attr('alt');    
    var content = $(this).next().html();
    $(".text p").html(content);
    defaultHeading = content;
 });