JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="app"></div>

CSS

html, body, #app {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.item-list {
  height: 100%;
  overflow: auto;
}


.item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 80px;
  color: red;
  width: 100%;
  height: 200px;
}

Babel + JSX

const Item = (props) => (
  <div className="item">{props.children}</div>
);

class App extends React.Component {
  state = {
    items: [...Array(100).keys()],
    numShow: 5,
  }

  onScroll = e => {
    if (e.target.offsetHeight + e.target.scrollTop === e.target.scrollHeight) {
      this.setState(({ items, numShow }) => ({
        numShow: Math.min(numShow + 5, items.length),
      }));
    }
  }

  render() {
    const { items, numShow } = this.state;

    return (
      <div className="item-list" onScroll={this.onScroll}>
        {items.slice(0, numShow).map(n => <Item>{n}</Item>)}
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('app'))