JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
   one
      <div class="down_arrow"> &darr; </div>
    </div>

  <div class="container two">
   one
      <div class="down_arrow"> &darr; </div>
    </div>

  <div class="container">
   one
      <div class="down_arrow"> &darr; </div>
    </div>

CSS

.container:nth-child(odd) {
    
    width: 150px;
    background-color:grey;
    height:500px;
}

.down_arrow {
    
    height: 500px;
    
}

JavaScript

$('.down_arrow').click(function(e) {
    var next_container = $(this).parents(".container").next(".container");
    $('html, body')
    .animate({scrollTop:next_container.offset().top}, 'slow');
});