JSFiddle - React, Tailwind, and code Playground

HTML

<div id="interests">
                <h1 class="section-head">Interests</h1>
                <div class="list-grid">
                    <div class="grid-icons">
                        <ul>
                            <li><img src="./assets/images/futbol.png" alt="soccer" id="soccer" /></li>
                            <li><img src="./assets/images/basketball.png" alt="basketball" id="bball" /></li>
                            <li><img src="./assets/images/headphones.svg" alt="music" id="music" /></li>
                            <li><img src="./assets/images/RL.jpg" alt="rocket league" id="RL" /></li>   
                            <li><img src="./assets/images/GER.png" alt="German" id="ger" /></li>    
                            <li><img src="./assets/images/SPA.png" alt="Spanish" id="spa" /></li>   
                        </ul>
                    </div>
                    <div class="grid-ico-desc">
                        <p id="hover-inst">
                            <em>Hover over an icon to read about it</em>
                        </p>
                        <p id="soccer-desc">
                            The 2014 World Cup pulled me into the sport and since then I haven't pulled back. Watching
                            <em>redacted</em> has become a weekly ritual for me, and its introduced me to a good group of friends
                            through supporters' organizations. I've also recently made my intramural debut. I play like a horse on
                            ice skates, but it's great cardio, so if anyone is looking for more interesting ways to run, there you have it.
                        </p>
                        <p id="bball-desc">
                            Possibly my first real passion, I've been playing basketball since I started elementary
                            school. I've continued playing, even now, as I fit in intramural participation in every semester
                            I can. I watch nearly a...

JavaScript

$(document).ready(function() {
    $("#soccer").hover(function() {
        $("soccer-desc").css("opacity", "1");
        $("hover-inst").css("opacity", "0");
    });
});