JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bann">
  <p>
    This div must be scrollable on one turn of mousewheel down an up.
  </p>
</div>
<div class="spacer">
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  <h1>Some text</h1>
  
</div>

CSS

html, body{
  width:100%;
  height:100%;
}
.bann{
  width: 100%;
  height: calc(100% - 200px);
  background: darkgreen;
}
p{
  color:white;
  padding-top:100px;
}