JSFiddle - React, Tailwind, and code Playground

by Shanid

HTML

<div class="page">
  <nav>
    <a class="one" href="#">Förarbiografi</a>
      <img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
    <a class="two" href="#">Mercedes F1</a>
      <img src="Media/Menu_icon.svg" class="menuicon" alt="MenuIcon">
    <a class="three" href="#">Statistik</a>
  </nav>

  <div id="forare" class="main">
    <h1 class="rubrik">Förare</h1>
    <p>Content</p>
  </div>
  <div id="mercedes" class="main">
    <h1 class="rubrik">Mercedes F1 genom åren</h1>
    <p>Content</p>
  </div>
  <div id="statistik" class="main">
    <h1 class="rubrik">Statistik</h1>
    <p>Content</p>
  </div>
</div>

CSS

.main{
    display:none;
}

JavaScript

$('.one').click(function(){
    $('.main').hide();
    $('#forare').show();
});
$('.two').click(function(){
    $('.main').hide();
    $('#mercedes').show();
});
$('.three').click(function(){
    $('.main').hide();
    $('#statistik').show();
});