JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="1"><div class="block"></div></a>
<a href="#" id="2"><div class="block"></div></a>
<a href="#" id="3"><div class="block"></div></a>

<div class="content"></div>

CSS

.block { width:40px; height:40px; background-color:#F00; float:left; margin-left:10px; }

.content { width:140px; height:60px; background-color:#FF0; float:left; margin-left:30px; }

JavaScript

$( document ).ready(function() {
    $('#1').mouseover(); 
});

$('#1').mouseover(function() {
  $('.content').html('This is a text example 1');
});

$('#2').mouseover(function() {
  $('.content').html('This is a text example 2');
});

$('#3').mouseover(function() {
  $('.content').html('This is a text example 3');
});