JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <div class="innercontent">
    
    <div class="section" data-section="1">
    <h1>Section 1</h1>
      <div class="mouse" data-slide="2">scroll</div>
    </div>
     <div class="section" data-section="2">
     <h1>Section 2</h1>
      <div class="mouse" data-slide="3">scroll</div>
    </div>
     <div class="section" data-section="3">
     <h1>Section 3</h1>
      <div class="mouse" data-slide="1">scroll</div>
    </div>
    
  </div>
</section>

CSS

section {
  width: 100vw;
	height: 100vh;
  background: #20262E;
	position: absolute !important;
  overflow: hidden !important;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
  display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: center;
	justify-content: center;
  }

  .innercontent {
  position: absolute !important;
  overflow: hidden !important;
  width: 100%;
	height: 100%;
  top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
}

.section {
  position: relative;
  width: 100%;
	height: 100%;
  top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
  }

JavaScript

$(".mouse").on("click", function(e) {
  var slide =$(this).attr("data-slide");
  alert(slide);
});