JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="content">
    <div class="viewer">
      <!-- под этим блоком должно отображаться содержимое content по позиции скрола -->
    </div>
    <!-- content по умолчанию не виден -->
    <p>
      Нет мне нужно что бы 
      При прокрутке вниз test2 оставался как обычная страница на месте
      А test1 было как окно через которое можно смотреть на содержимое test2
    </p>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
  </div>
</div>

CSS

.container {
  position: relative;
}

.content {
  
}

.viewer {
  background: rgba(0, 0, 0, 0.5);
  height: 60px; /* высота блока просмотра */
  width: 100%;
  position: fixed;
}