JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<header>
    <nav>
      <a href="#homeTab" onclick="page(0);" title="Home">home</a>
      <a href="#xTab" onclick="page(1);" title="x">page x</a>
      <a href="#yTab" onclick="page(2);" title="y">page y</a>
      <a href="#zTab" onclick="page(3);" title="z">page z</a>
    </nav>
  </header>
  <div id='container'>
    <div id="homeTab">
      <p>Home page</p>
    </div>
    <div id="xTab" class="ttab">
      <p>Page X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X<br>X</p>
    </div>
    <div id="yTab" class="ttab">
      <p>Page...

CSS

#container {
        display: block;
      }

      nav {
        position: fixed;
        display: block;
      }

      #homeTab, #xTab, #yTab, #zTab {
        position: fixed;
        top: 50px;
        transition: 2s;
        -webkit-transition: 2s;
        -moz-transition: 2s;
        -o-transition: 2s;
        -ms-transition: 2s;
      }

      .ttab{
      height:200px;
      overflow-y:scroll;
      }

JavaScript

var container = document.getElementById('container');
  var homeTab = document.getElementById('homeTab');
  var xTab = document.getElementById('xTab');
  var yTab = document.getElementById('yTab');
  var zTab = document.getElementById('zTab');

  if (typeof window.innerWidth != 'undefined') {
    var vpwidth = window.innerWidth;
  }

  homeTab.style.width = vpwidth + 'px';
  xTab.style.width = vpwidth + 'px';
  yTab.style.width = vpwidth + 'px';
  zTab.style.width = vpwidth + 'px';

  /** POSITIONS THE TABS BASED ON WHICH TAB SHOULD BE SHOWING **/
  function page(tab) {
    switch (tab) {
      case 0:
        homeTab.style.left = '0px';
        xTab.style.left = vpwidth + 'px';
        yTab.style.left = 2 * vpwidth + 'px';
        zTab.style.left = 3 * vpwidth + 'px';

        break;
      case 1:
        homeTab.style.left = (0 - vpwidth) + 'px';
        xTab.style.left = '0px';
        yTab.style.left = vpwidth + 'px';
        zTab.style.left = 2 * vpwidth + 'px';
        break;
      case 2:
        homeTab.style.left = (0 - 2 * vpwidth) + 'px';
        xTab.style.left = (0 - vpwidth) + 'px';
        yTab.style.left = '0px';
        zTab.style.left = vpwidth + 'px';
        break;
      case 3:
        homeTab.style.left = (0 - 3 * vpwidth) + 'px';
        xTab.style.left = (0 - 2 * vpwidth) + 'px';
        yTab.style.left = (0 - vpwidth) + 'px';
        zTab.style.left = '0px';
        break;
      default:
        homeTab.style.left = '0px';
        xTab.style.left = vpwidth + 'px';
        yTab.style.left = 2 * vpwidth + 'px';
        zTab.style.left = 3 * vpwidth + 'px';
        break;
    }
  }
  page(0);