JSFiddle - React, Tailwind, and code Playground

HTML

<div Id="home-title1">
        <h3 class="yellow-title">HOVERING TITLE</h3>
    </div>
    

    <div class="text-info1">
        <h1 id="title-box">DISPLAYABLE TITLE</h1>
        <p id="home-box1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor neque vitae tellus vehicula euismod. Phasellus quam magna, pulvinar laoreet volutpat vel, vulputate in felis. Vivamus non dignissim felis. Aliquam pretium mollis ligula ac porttitor. Duis consectetur ex quam. Suspendisse condimentum bibendum nibh, id faucibus ipsum ultrices sit amet. Nullam non sapien elementum, gravida lorem eu, dictum lacus. Nulla non lacus facilisis, euismod metus sed, luctus nisl. Phasellus non mattis ipsum. Cras interdum volutpat bibendum. </p>
    </div>

CSS

.text-info1{
	height: 250px;
  	border: 2px solid #000739;
  	display: flex;
  	align-items: center;
  	justify-content: center;
	text-align:center;
}

#title-box{
	display:block;
}

#home-title1 {
	font-weight:800; 
	text-align:center;
	cursor: pointer;
}

#home-title1:hover {
	background-color: RGBA(199,14,22,0.7); 
}

.yellow-title{
	margin-bottom:0!important;
	padding-bottom:20px!important;
}
.yellow-title:hover{
	color:#eec929!important;
}
#home-box1 {
	display:none;
	padding-left:15px;
	padding-right:15px;
}

JavaScript

document.getElementById('home-title1').onmouseover = function(){
    document.getElementById('title-box').style.display = 'none';
    document.getElementById('home-box1').style.display = 'block';
}
document.getElementById('home-title1').onmouseout = function(){
    document.getElementById('title-box').style.display = 'block'; 
    document.getElementById('home-box1').style.display = 'none';
}