JSFiddle - React, Tailwind, and code Playground

by Bruno Gibellino

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>

<header class="navbar navbar-light bg-light">
  <div class="navbar-brand">
    <h2 class="text-primary">Logo</h2>
  </div>

  <div class="navbar-right">
    <div id="tabs" class="nav nav-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#gallery">Gallery</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#about">About us</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contacts">Contacts</a>
      </li>
    </div>
  </div>
</header>

<div class="wrapper">
  <div class="wrapper_child">
    <div id="home" class="tab bg-warning">
      <h3 class="text-center align-middle">Home</h3>
    </div>

    <div id="gallery" class="tab bg-success">
      <h3 class="text-center align-middle">Gallery</h3>
    </div>

    <div id="about" class="tab bg-primary">
      <h3 class="text-center align-middle">About us</h3>
    </div>

    <div id="contacts" class="tab bg-danger">
      <h3 class="text-center align-middle">Contacts</h3>
    </div>
  </div>
</div>

<footer class="navbar fixed-bottom navbar-light bg-light">
  <div class="navbar-left">
    <label>Div 1</label>
  </div>
  <div class="navbar-center">
    <label>Div 2</label>
  </div>
  <div class="navbar-right">
    <label>Div 3</label>
  </div>
</footer>


</body>

CSS

body {

}

.wrapper {
  height: 81.7vh;
  width: 100vw;
  overflow: hidden;
}
.wrapper_child {
 position: relative;
 width: 400%;
 height:inherit;
}

.wrapper .tab {
  width: 100vw;
  height: 100vh;
  float:left;
  text-align: center;
}

JavaScript

$('.nav-item a.nav-link').click(function() {

  var offsLeft = 0;
	el = $(this);
  $("*a.nav-link").removeClass("active");
  el.addClass("active");

  href = el.attr('href');
  offsLeft = $(href).position().left;
  
	console.log("href: "+href+", ofsset.left: "+offsLeft);
  
  console.log($("#home").position().left);
  console.log($("#gallery").position().left);
  console.log($("#about").position().left);
  console.log($("#contacts").position().left);

  $('.wrapper').stop().animate({
    'scrollLeft': offsLeft
  }, 2000);
  event.preventDefault();
});