JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<title>Horizontal Scroll</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    <script src="https://corentinfardeau.github.io/horizontal-scroll/index.js"></script>
	</head>
	
  
	<body>

		<div class="container">

			<div id="welcome" class="block">
				<h2>Item 1</h2>
			</div>

			<div id="services" class="block grey">
				<h2>Item 2</h2>
			</div>

			<div id="about" class="block">
				<h2>Item 3</h2>
			</div>

			<div id="contacts" class="block grey">
				<h2>Item 4</h2>
			</div>
      
			<div id="articles" class="block">
				<h2>Item 4</h2>
			</div>
      
		</div>
    

		<script>

			var blocks = document.getElementsByClassName('block');
			var container = document.getElementsByClassName('container');
			var hs = new HorizontalScroll.default({
				blocks : blocks,
				container: container,
				isAnimated: false,
				springEffect: 0.8
			});

		</script>




 <!-- MENU _____________________ -->
  
 <header class="large">
	  <nav>
		<a href="#welcome"><div class="logo"></div></a>
		  <ul>
			<li><a href="#welcome">Welcome</a></li>
			<li><a href="#services">Services</a></li>
			<li><a href="#about">About</a></li>
			<li><a href="#contacts">Contacts</a></li>
			<li><a href="#articles">Library</a></li>
		 </ul>
	  </nav>
  </header>

	</body>
</html>

CSS

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    scroll-behavior: smooth;
}

body {
    margin: 0;
}
.block{
    width: 100vw;
    height: 100vh;
    margin: 0;
}
.grey {background: #ccc;}

.container{

}

/* MENU _____________________ */

.logo {
    float: left;
  }
  
nav {
    width: 100%;
  }
  
  /* HEADER */
  
header {
    float: left;
    width: 100%;
    position: absolute;
    z-index: 9999999;
    top: 0;
}
  
  
  
/* UNORDERED LIST */
  
header.large ul {
    list-style: none;
    float: right;
    margin-right: 25px;
}
header.small ul {
    list-style: none;
    float: right;
    margin: 0;
}
  
header.large li {
    display: inline;
    float: left;
    list-style-position: inside;
    height: 50px;
    -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    transition: all 0.3s ease-in-out;
}
  
  
header.large li a {
    display: block;
    padding: 20px;
    color: #0E6245;
    text-decoration: none;
    font-family: 'Montserrat', 'arial', sans-serif;
    font-weight: 600 !important;
    letter-spacing: -1px;
    font-size: 25px;
  
    background-image: linear-gradient(#0E6245, #0E6245);
    background-position: 50% 80%;
    background-repeat: no-repeat;
    background-size: 0% 4px;
  
    -moz-transition: all 0.3s ease-in-out 0s;
    -ms-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
  
header.large li a:hover, a:focus {
    background-size: 60% 4px;
}

h2{
    font-size: 80px;
    font-family: Helvetica;
    padding-top: 100px;
    text-align: center;
}