JSFiddle - React, Tailwind, and code Playground

HTML

<img class="tile-0"  src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F0825224a649c4490aea8a0c4dbe577cc" />
<div class="tile-1">
  <img class="inner-1" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2Ff9ca7731e2a140dda63aaa8177a392ab">
</div>
<img class="tile-2" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F8cdc4e6e12914874a5fdcec9a06f9cba">
<img class="tile-3" src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F64e0d5ce361240b2a4c951b5e876692e">

CSS

body {
  margin: 0;
}

img {
  width: 100%;
  display: block;
  height: 100vh;
  position: relative;
  object-fit: contain;
}

.tile-1 {
  height: 200vh;
  pointer-events: none;
}

.inner-1 {
  height: 100vh;
  position: sticky;
  top: 0;
  object-fit: contain;
  background: white;
}

.tile-2 {
  margin-top: -100vh;
  background: black;

}

.tile-3 {
  background: black;
}