JSFiddle - React, Tailwind, and code Playground

by Anatol

HTML

<div class="navitem">
  <a href="#eins">Eins</a>
  <a href="#zwei">Zwei</a>
  <a href="#drei">Drei</a>
</div>

<div id="main">
  <section id="eins">
    Text 1 Text 1 Text 1 Text 1 Text 1 Text 1 Text 1
  </section>
  <section id="zwei" class="hide">
    Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2 Text 2
  </section>
  <section id="drei" class="hide">
    Text 3 Text 3 Text 3 Text 3 Text 3 Text 3
  </section>
</div>

CSS

#main {
  position:relative;
}

#main>section {
  position:absolute;
}

.hide {
  display:none;
}

JavaScript

$('.navitem a').on('click', function(ev) {
  var target=$(this).attr('href');
  $('#main>section').not(target).stop().fadeTo(1500, 0);
  $(target).stop().fadeTo(1500, 1);
  ev.preventDefault();
});