JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <a href='#' name='page1'>Open Google</a>
    <a href='#' name='page2'>Open YouTube</a>
<div id='loadpage'>
    <h1>This will be deleted.</h1>
</div>
</body>

CSS

#loadpage{display:none;border:2px solid orange;}

JavaScript

$(document).ready(function(){
    
    $('a').click(function(){
        
        var pagename=$(this).attr('name');
        
        $('#loadpage').fadeOut(300);
        if(pagename=='page1'){
            $('#loadpage').html("PAGE1.PHP WILL LOAD IF YOU HAVE IT!!!");
            $('#loadpage').load('page1.php',function(){$('#loadpage').slideUp();});
    }
        else if(pagename=='page2'){
            $('#loadpage').html("PAGE2.PHP WILL LOAD IF YOU HAVE IT!!! OKKK");
            $('#loadpage').load('page2.php',function(){$('#loadpage').fadeIn(300);});}
    
    });
    
});