JSFiddle - React, Tailwind, and code Playground

HTML

<div id="profile-filter" class="container-fluid">
  ABC
  <div id="province-toggle-wrapper">
    DEF
  </div>
</div>

CSS

#province-toggle-wrapper{
  height: 1000px;
  background: rgba(0,0,0,0.5);
}

JavaScript

$(document).ready(function() {
  $("#province-toggle-wrapper").click(function() {
    $('html, body').animate({
      scrollTop: $("#profile-filter").offset().top
    }, 2000);
  });
});