JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<div class="viewport">
  <div class="long-list">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

CSS

html,body {
  padding: 0;
  margin:0;
}
.viewport {
  height: 100vh;
  background-color: black;
  overflow-x: hidden;
  overflow-y: scroll;
}

.long-list {
}

.item {
  width: 100%;
  height: 100px;
  margin-bottom: 1rem;
  background-color: tomato;
}