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='flex-item'></div>
    <div class='flex-item'></div>
    <div class='flex-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;
}
* {
  box-sizing: border-box;
}

.viewport {

  background-color: black;
  overflow-x: hidden;
  overflow-y: scroll;
}

.long-list {
  display: flex;
  flex-direction: column;
}

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

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


.form {
  background-color: blue;
}