JSFiddle - React, Tailwind, and code Playground

HTML

<div class="module">
    <div class="tabs">
        <div class="tab">
            <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">
        </div>
        <div class="tab">
            <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">
        </div>
        <div class="tab">
            <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">
        </div>
    </div>
    <div class="tab-panels">
        <div class="tab-panel active">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit unde inventore, aliquam architecto minus minima quis. Aliquid voluptates, dolorum ullam dicta nesciunt molestiae maiores! Ratione quasi officia recusandae laboriosam nihil voluptate perferendis fugiat quae provident aliquam harum id tenetur quisquam, ab repellendus suscipit eligendi temporibus facilis sapiente a veniam voluptatibus quidem in voluptatum vero. Soluta excepturi quisquam, sed, quas rem aperiam atque obcaecati nulla repellendus corporis? Consequatur aut quidem, earum enim asperiores. Libero deserunt dignissimos blanditiis est, repellendus qui molestiae tenetur quas assumenda officiis modi totam, quae ullam. Quaerat officiis tempora molestias voluptatibus sint quo incidunt nostrum quisquam sed excepturi?</p>
            </div>
        </div>
        <div class="tab-panel">
            <div class="content">
                <p>Lorem ipsum dolor sit amet.</p>
            </div>
        </div>
        <div class="tab-panel">
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error fugit harum voluptates. Deserunt adipisci libero incidunt nostrum similique laborum dicta, porro natus harum odit, voluptatum vitae, minima iure omnis. Odit, nemo incidunt voluptas placeat est...

SCSS

.tab {
    display: inline-block;
}

.tab-panel {
    display: none;
    
    &.active {
        display: block;
    }
}

JavaScript

$(document).ready(function () {

    var $tabs = $('.tab');
    var $panels = $('.tab-panel')

    // attach js event handler to all tab jQuery objects
    $tabs.on('mouseover', function() {
        var $this = $(this);
        // get hover index
        var hindex = $this.index();

        // use the active class to show and hide correct panel based on current hover index
        $panels.removeClass('active');
        $panels.eq(hindex).addClass('active');
    });
});