JSFiddle - React, Tailwind, and code Playground

HTML

<div class="servicepage">

    <div class="serviceleft">
        <a class="spotlight" href="" style="position: relative; overflow: hidden;">
         <img src="http://176.32.230.17/printingcrazy.com/cache/widgetkit/gallery/7/DigitalPrintSquare-303c72912d.jpg" width="160" height="160" alt="DyeSubSquare"/>
        </a>
        <a class="spotlight" href="" style="position: relative; overflow: hidden;">
         <img src="http://176.32.230.17/printingcrazy.com/cache/widgetkit/gallery/7/DyeSubSquare-f404af45da.jpg" width="160" height="160" alt="DyeSubSquare"/>
        </a>
    </div>
    
    <div class="serviceright">
        <ul>
            <li>
                <h3>Digital Print</h3>
            </li>
            <li>
                <h3>Dye Sublimation</h3>
            </li>
        </ul>
    </div>

</div>

CSS

.border {
    border: 1px solid red;
}

.redtext {
    color: red;
}

.spotlight {
    display: inline-block;
}

JavaScript

$(document).ready(function(){
    $(".serviceright h3").mouseenter(function(){
        var indexH3 = $(this).parent().index();
        $(".serviceleft .spotlight").eq(indexH3).addClass("border");
    });
    $(".serviceright h3").mouseleave(function(){
        $(".serviceleft .spotlight").removeClass("border");
    });
    
    $(".serviceleft .spotlight").mouseenter(function(){
        var indexA = $(this).index();
        $(".serviceright h3").eq(indexA).addClass("redtext");
    });
    $(".serviceleft .spotlight").mouseleave(function(){
        $(".serviceright h3").removeClass("redtext");
    });
});