JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">
  <input class="header__button" type="button" value="stretch"> 
</header>

SCSS

* {
  margin: 0;
  padding: 0;
}

.header {
  height: 200px;
  background: #ccc;
  transition: 0.5s;
  &--stretch {
    height: 500px;
  }
}

JavaScript

const header = document.querySelector('.header');
const button = document.querySelector('.header__button');

button.addEventListener('click', () => {
	header.classList.toggle('header--stretch');
})