JSFiddle - React, Tailwind, and code Playground

by Bruno Gibellino

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<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 cont" href="#contacts">Contacts</a>
					</li>
				</div>
			</div>
		</header>

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

				<div id="gallery" class="tab">
					<div class="container mt-2">
						<h3 class="text-center align-middle">Gallery</h3>
						<div id="img_gallery" class="text-left">
							<div class="img" id="1"></div>
							<div class="img" id="2"></div>
							<div class="img" id="3"></div>
							<div class="img" id="4"></div>
							<div class="img" id="5"></div>
							<div class="img" id="6"></div>
							<div class="img" id="7"></div>
							<div class="img" id="8"></div>
							<div class="img" id="9"></div>
							<div class="img" id="10"></div>
						</div>
					</div>
				</div>

				<div id="about" class="tab">
					<div class="container mt-2">
						<h3 class="text-center align-middle">About us</h3>
					</div>
				</div>

				<div id="contacts" class="tab">
					<div id="tab_contacts" class="container mt-2">
						<div id="inner">
							<h3 class="text-center...

CSS

::-webkit-scrollbar{
	display: none;
}

header{
		border-bottom: 1px solid rgba(102,102,102,0.6);
		box-shadow: 0 1px 5px gray;
	}

	.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;
	}

	#img_gallery{
		margin-top: 3%;
	}

	.img{
		width: 100px;
		height: 100px;
		background-color: pink;
		margin: 2px;
		display: inline-flex;
	}

	#tab_contacts{
		width: 100%;
		height: 81.7vh;
		overflow: hidden !important;
		padding: 0 !important;
	}

	#inner{
		width: 100%;
		height: 100%;
		overflow: auto !important;
		padding-right: 20px;
	}

	footer{
		border-top: 1px solid rgba(102,102,102,0.6);
		box-shadow: 0 -1px 5px gray;
	}

JavaScript

$(document).ready(function(){

			$("#img_gallery").children().hide();

			$('.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;

				if(href == "#gallery"){
					delay = 0;

					$('.wrapper').stop().animate({
						'scrollLeft': offsLeft
					}, {duration: 2000, 
						complete: function(){ 
							$("#img_gallery").children().each(function(){
								$(this).delay(delay).queue(function() {
									$(this).show().addClass("animated bounceIn").dequeue();
								});
								delay+=500;
							});
						}
					});
				}else{
					$('.wrapper').stop().animate({
						'scrollLeft': offsLeft
					}, {duration: 2000, 
						complete: function(){ 
							$("#img_gallery").children().each(function(){
								$(this).removeClass("animated bounceIn").hide();
							});
						}
					});
				}

			});

		});