JSFiddle - React, Tailwind, and code Playground

by Town

HTML

<div id="container" style="width: 974px; height: 200px;">
    
    <div id="left" style="width: 200px; height: 200px;">
        <div id="products" >
            
            <img src="home.png" alt="home" />
            
            <img src="services.png" alt="services" /> 
            
            <img src="contact.png" alt="contact" /> 
            
        </div>
        
    </div>
    
    <div id="right" style="width: 760px; height: 200px;">
        <div class="description" id="home">
            Home
        </div>
        
        <div class="description hidden" id="services">
            Services
        </div>
        
        <div class="description hidden" id="contact">
            Contact 
        </div>
    </div>
    
</div>

CSS

.hidden{
    display:none;
}

#container {
    margin: 0%;
    padding: 0;
    width: 100%;
    
}
#left, #right {
    float: left;
    margin: 0% 0 0% 0%;
    padding: 0%;
    /*background-color: #000;*/
}
#right {
    float: right;
    margin: 0% 0% 0% 0;
}
.clear {
    height: 0;
    font-size: 1px;
    margin: 0;
    padding: 0;
    line-height: 0;
    clear: both;
}

JavaScript

var oldSelected = "home";
$(document).ready(function() {
    $("#products img").mouseover(function() {
        $(".description").stop(true, true);
        var newSelected = $(this).attr("alt");
        $("#" + oldSelected).fadeOut('normal', function() {
            $("#" + newSelected).fadeIn();
        });
        oldSelected = newSelected
    });
});