JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/vendors/easings.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/vendors/scrolloverflow.min.js"></script>
<div id="fullpage">
	<div class="section red">
    <img src="https://picsum.photos/2000/1024" alt="">
    Section A
  </div>
	<div class="section yellow">Section B</div>
	<div class="section green">Section C</div>
	<div class="section blue">Section D</div>
	<div class="section">
	  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi at repudiandae voluptate porro. Ipsam velit quas animi ab saepe dolores iste ex. Quod animi doloribus, eligendi provident possimus nulla commodi.</p>
	  <p>Quis tenetur animi placeat excepturi, sequi omnis rem vitae fugit neque quisquam quaerat voluptate quae laboriosam, aliquam illum repellat! Atque quasi quibusdam quos provident consequatur voluptas, repellendus est eaque rem!</p>
	  <p>Doloremque hic facere voluptas atque incidunt deleniti reprehenderit. Ab adipisci nam, cupiditate harum distinctio architecto porro ducimus dolor explicabo fugiat. Sapiente harum, perferendis maxime tenetur rem molestiae at doloribus commodi!</p>
	  <p>Similique, quas explicabo nesciunt, quibusdam qui molestiae officia ipsa dignissimos error modi earum sint molestias sit provident repellendus iusto aliquid quisquam autem incidunt libero! Quam excepturi, sint repellendus optio sequi.</p>
	  <p>Consequatur itaque quod facilis. Fuga rerum qui accusamus, vel debitis labore suscipit sunt dolorem natus quidem veniam molestias. Cumque minus ipsa sed! Provident minima voluptatem dicta corporis nisi eius praesentium!</p>
	  <p>Expedita iste, voluptas repudiandae aspernatur optio odio nostrum nesciunt ipsum. Animi, temporibus, hic?...

CSS

.red { background-color: red; }
.yellow { background-color: yellow; }
.green { background-color: green; }
.blue { background-color: blue; }

.section {
  position: relative;
}
.section img {
  object-fit: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

JavaScript

new fullpage('#fullpage', {
	//options here
	autoScrolling:true,
	scrollHorizontally: true,
  scrollOverflow: true
});