JSFiddle - React, Tailwind, and code Playground
HTML
<div class="birth_date">
<div class="container">
<div class="row">
<div class="col-md-6">
Дата рождения
</div>
<div class="col-md-6">
<label for="Дата_рождения">
<input id="datepicker" name="Дата_рождения" placeholder="01.01.1970">
</label>
</div>
</div>
</div>
<div class="Surname_passport">
<div class="container">
<div class="row">
<div class="col-md-6">
Фамилия(Латинскими, как в загранпаспорте)
</div>
<div class="col-md-6">
<label for="Фамилия">
<input type="text" name="Фамилия" placeholder="Familia">
</label>
</div>
</div>
</div>
</div>
</div>
<div class="Name_passport">
<div class="container">
<div class="row">
<div class="col-md-6">
Имя(Латинскими, как в загранпаспорте)
</div>
<div class="col-md-6">
<label for="Имя">
<input type="text" name="Имя" placeholder="Imya">
</label>
</div>
</div>
</div>
</div>
<div class="Patronym_passport">
<div class="container">
<div class="row">
<div class="col-md-6">
Отчество(Латинскими, как в загранпаспорте)
</div>
<div class="col-md-6">
<label for="Отчество">
<input type="text" name="Отчество" placeholder="Otchestvo">
</label>
</div>
</div>
</div>
</div>
<div class="Surname">
<div class="container">
<div class="row">
<div class="col-md-6">
Фамилия
</div>
<div class="col-md-6">
<label for="Фамилия">
<input type="text" name="Фамилия" placeholder="Фамилия">
</label>
</div>
</div>
</div>
</div>
<div class="Name">
<div class="container">
<div class="row">
<div class="col-md-6">
Имя
</div>
<div class="col-md-6">
<label for="Имя">
<input type="text" name="Имя" placeholder="Имя">
</label>
</div>
</div>
</div>
</div>
<div class="Patronym">
<div class="container">
<div class="row">
<div class="col-md-6">
Отчество
</div>
<div...
CSS
section {
display:none;
}
JavaScript
$("#pers_control").click(function() {
$("#personal_data").show();
});
$("#pers_control").click(function() {
$('html, body').animate({
scrollTop: $("#personal_data").offset().top
}, 0);
});