JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height:200px">
    <a id="anchorID" class="anchorClick" href="#transparency">
        <div class="arrow-down-light-blue">Click here</div>
    </a>
</div>
<!-- <div style="height:500px"></div> -->
<div id="transparency"> your transparency div here </div>

<div style="margin-top:380px;">
    <a id="anchorID1" class="anchorClick" href="#transparency1">
        <div class="arrow-down-light-blue">Click here</div>
    </a>
</div>
<div style="height:500px"></div>
<div id="transparency1" style="margin-bottom:100px;"> your transparency.1 div here </div>

JavaScript

$(document).ready(function(){
   $(".anchorClick").click(function(){
      $('html, body').animate({
       scrollTop: $($(this).attr('href')).offset().top
      }, 1000);
   });
});