JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bloc1" class="bloc" data-sentence="sentence1"></div>
<div id="bloc2" class="bloc" data-sentence="sentence2"></div>

<p id="sentence1" class="sentence" data-bloc="bloc1">Hep toi là bas... Je suis lié au premier bloc !</p>
<p id="sentence2" class="sentence" data-bloc="bloc2">Et moi au deuxième</p>

CSS

.bloc {
    width : 100px;
    height : 40px;
    background-color : grey;
    margin : 10px;
}

JavaScript 1.7

$(".sentence").hover(function() {
    var bloc = $(this).data().bloc;
    $("#"+bloc).css("background-color", "red");
});

$(".sentence").mouseout(function() {
    var bloc = $(this).data().bloc;
    $("#"+bloc).css("background-color", "grey");
});

$(".bloc").hover(function() {
    var sentence = $(this).data().sentence;
    $("#"+sentence).css("color", "red");
});

$(".bloc").mouseout(function() {
    var sentence = $(this).data().sentence;
    $("#"+sentence).css("color", "black");
});