JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <a href="#" data-article="article1">link 1</a>
    <a href="#" data-article="article2">link 2</a>
    <a href="#" data-article="article3">link 3</a>
</nav>

<div id="articleGroup">
    <article id="article1" class="visible">article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 article 1 </article>
    <article id="article2" class="hidden">article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2 article 2...

CSS

body > div, body > nav, body > footer {
    margin: 1em 0.5em 0em 0.5em;
    background-color: rgba(0,0,0,0.5);
}
nav > a:hover {
    cursor:hand;   
}
#articleGroup {
    position: relative;
}
article 
{

}

.hidden {
    opacity: 0;
    z-index: 1;
    position:absolute;
}
footer { float:left; }
.visible {
    opacity: 1;
    z-index: 2;
-webkit-transition-property: opacity;  
    -moz-transition-property: opacity;  
    -o-transition-property: opacity;  
    -ms-transition-property: opacity;  
    transition-property: opacity;  

        -webkit-transition-duration: 0.35s;
    -moz-transition-duration: 0.35s;  
    -o-transition-duration: 0.35s;  
    -ms-transition-duration: 0.35s;  
    transition-duration: 0.35s;    

    -webkit-transition-timing-function: ease-in; 
    -moz-transition-timing-function: ease-in; 
    -o-transition-timing-function: ease-in; 
    -ms-transition-timing-function: ease-in; 
    transition-timing-function: ease-in; 
}

JavaScript

$(function() {
		$('nav > a').click(function() {
			var $source = $(this),
				articleId = $source.data('article');

			$('article').each(function () {
				var $current = $(this);
				var show = $current.attr('id') === articleId;
				$current.toggleClass('hidden', !show);
				$current.toggleClass('visible', show);
			});
		});
	});