JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="display">
  <div class="display__header">
 
    <div class="display__header__inner" data-height="100px">
         <h1>As bad as you want to breath...</h1>
    </div>
  </div>
  <div class="display__content">
    be obsessed with greatness.
  </div>
</div>

SCSS

.display {
  background: #f7f7f7;
  display: flex;
  flex-direction:column;
  min-height:100vh;

  &__header {
    
    min-height: 100vh;
    transition: 0.8s ease all;
    display: flex; 
    align-items: center;
    justify-content: center;
    /* padding: 2rem; */
    &__inner {
      padding: 2rem;
    }
  }
  
  &__content {
    background: white;
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
  }
  
  &:hover {
    .display__header {
      min-height: 20px;
    }
  }
}