JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:void(0)" class="show-page" data-page="one">ONE</a><br/><br/>
<a href="javascript:void(0)" class="show-page" data-page="two">TWO</a>

<div class="page one hide">
    <div class="row">
        <center> <h1>ONE</h1> </center>
        <center> <h1>ONE</h1> </center>
        <center> <h1>ONE</h1> </center>
        <center> <h1>ONE</h1> </center>
    </div>
</div>
<div class="page two hide">
    <div class="row">
        <center> <h1>TWO</h1> </center>
         <center> <h1>TWO</h1> </center>
         <center> <h1>TWO</h1> </center>
         <center> <h1>TWO</h1> </center>
    </div>
</div>

JavaScript

if (typeof (Storage) !== "undefined" && localStorage.getItem('pageToShow')) {
        var pageToShow = localStorage.getItem('pageToShow');
        $('.page').addClass('hide');
		$('.page').css("display", "none");
        $('.' + pageToShow).removeClass('hide');
		$('.' + pageToShow).css("display", "block");
    }
$('.show-page').click(function (e) {
   // e.preventDefault();
    var pageToShow = $(this).data('page');
    
    $('.page').addClass('hide');
        $('.' + pageToShow).removeClass('hide');
	$('.page:not(.'+pageToShow+')').fadeOut(200, function(){
			$('.' + pageToShow).fadeIn(200);
	});
    if (typeof (Storage) !== "undefined") {
            localStorage.setItem('pageToShow', pageToShow);
    }

});