JSFiddle - React, Tailwind, and code Playground

HTML

<div class="page">

</div><div class="ac-container">
           <div class="fixheight">
           
           <input id="ac-1" class="btn btn-xl js-scroll-trigger backtotop" name="accordion-1" type="checkbox">
          <label id="some_point" for="ac-1">Оплатить взнос и электроэнергию</label>


                  <article>
                  <p>Введите Ваш номер телефона или номер участка и нажмите на кнопку "Получить пароль". Пароль будет отправлен в SMS на Ваш номер телефона.</p>
                      <input class="form-control" id="phone" type="tel" placeholder="Ваш телефон или номер участка *" required data-validation-required-message="Введите Ваш телефон">
                      <p class="help-block text-danger"></p>
                      <button class="sub-button btn" type="submit">Получить пароль</button> 
                  <p>Введите пароль, полученный по SMS</p>
                      <input class="form-control" id="phone" type="tel" placeholder="Ваш пароль *" required data-validation-required-message="Введите Ваш пароль"> <p class="help-block text-danger"></p>
                      <button class="sub-button btn" type="submit">Войти</button>
                  </article>
              </div>

          </div>
          
<div class="page">

</div>

CSS

.ac-container label{
    font-size: 18px;
    position: relative;
    z-index: 20;
  font-weight: 700;
  padding: 20px 40px;
  border-radius: 3px;
  color: white;
  border-color: #f6bf01;
  background-color: #fec503;
  
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  transition: all .2s;
  cursor: pointer;

}


.ac-container label:hover{
    color: white;
    border-color: #fed136;
    background-color: #fed136;
    font-size: 19px;
    box-shadow: 0 0 20px #fec302;
    transition: all .2s;
}

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    color: white;
    border-color: #fed136;
    background-color: #fed136;
    font-size: 19px;
    box-shadow: 0 0 20px #fec302;
    
}

.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(http://netcribe.com/example/arrow_down.png) no-repeat center center;  
}

.ac-container input:checked + label:hover:after {
    background-image: url(http://netcribe.com/example/arrow_up.png);
}

.ac-container input[type="checkbox"]{
    display: none;
}

.ac-container article{
    
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container input:checked ~ article {
     -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: height...

JavaScript

$('.backtotop:not(:checked)').click(function(){
           $('html, body').animate({ scrollTop: $('#some_point').offset().top }, 'slow');
       });