JSFiddle - React, Tailwind, and code Playground

HTML

<div class="design">
   <div class="menu">
    5 menu options will be in this div and when we hover at each link an image must appear to the right with fast zoom in effect like shooting.
               <li class="menu-item">
                   <a href="#"><img alt="foo"/></a></li>
               <li class="menu-item">
           <a href="#"><img alt="bar"/></a></li>
              <li class="menu-item">
           <a href="#"><img alt="bam"/></a></li>
              <li class="menu-item">
           <a href="#"><img alt="baz"/></a></li>
              <li class="menu-item">
           <a href="#"><img alt="quux"/></a></li>
   </div>
    <div class="zoom-preview">
image will appear here when we hover at each link at the left. each link it's own image.
        Also there must be a default image here when we do not hover at any link at the left.
    </div>
   <div class="clear"></div>
</div>

CSS

.design {
    border: 1px solid;
    width: 570px;
    padding: 10px;
    background: #fcdcdc;
    
}
.menu {
    float: left;
    border: 1px solid;
    width:  300px;
    height: 300px;
}
.zoom-preview {
    float: left;
    border: 1px solid;
    margin-left: 10px;
    width:  250px;
    height: 300px;
}
.clear {
    clear:both;
}
.menu li {
    position: relative;
    top: 50px;
    left: 100px;
    list-style: none;
    padding-bottom: 10px;
    
}

JavaScript

$("a").hover(function(){
    $(".zoom-preview").html($(this).html());
},
            function() {
    $( ".zoom-preview" ).html( "image will appear here when we hover at each link at the left. each link it's own image. Also there must be a default image here when we do not hover at any link at the left." );
  });