JSFiddle - React, Tailwind, and code Playground

by Fullzz

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/fullpage.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/vendors/easings.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/vendors/scrolloverflow.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.2/fullpage.js"></script>
<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section" id="secrion1">
      <div class="full-h">Some text</div>
      <div class="full-h">Some text</div>
      <div class="full-h">Some text</div>
    </div>
    <div class="section">Section 3</div>
     <div class="section">Section 4</div>
      <div class="section">Section 5</div>
       <div class="section">Section 6</div>
</div>

CSS

#fullpage .section:nth-child(even) {
  background-color: #e3e3e3;
}
#fullpage .section > div:nth-child(even) {
  background-color: green;
}
#fullpage .full-h {
  height: 100vh;
}

JavaScript

$('#fullpage').fullpage({
        
        autoScrolling:true,
        scrollingSpeed: 700,
        scrollBar: true,
       normalScrollElements: '#secrion1',
    });