JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="display">
  <div class="display__header">
 
    <div class="display__header__inner" data-height="100px">
    X
         <h1>Unleash the Kraken</h1>
         <small>Takes 10 Minutes</small>
         
         
          <h1>Unleash the Kraken</h1>
         <small>Takes 10 Minutes</small>
          <h1>Unleash the Kraken</h1>
         <small>Takes 10 Minutes</small>
          <h1>Unleash the Kraken</h1>
         <small>Takes 10 Minutes</small>
    </div>
  </div>
  <div class="display__content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut tortor non purus gravida egestas eu vel purus. Nam justo massa, hendrerit vitae tellus in, dapibus congue arcu. Aenean ut sodales risus, nec consectetur dolor. Donec aliquam sollicitudin sapien. Donec ligula nisl, bibendum vel aliquam sed, dictum quis sem. Duis id leo fringilla, lacinia ex a, maximus lorem. Sed ultricies a leo quis vehicula. Mauris urna orci, fringilla id erat nec, tempor cursus nibh. Nulla facilisi. Maecenas sit amet ante eget lorem varius euismod. Nulla est velit, dictum ut dignissim sit amet, hendrerit vitae ipsum. Donec condimentum pretium magna sit amet sagittis. Cras semper ex quis sodales mattis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse a leo sem. Nullam suscipit nec nulla in laoreet.

Nunc nec tempor risus. Vivamus at ultricies elit. Pellentesque pretium, risus eget pellentesque laoreet, felis mauris scelerisque felis, at placerat lorem massa eget lacus. Mauris varius accumsan erat, vel mollis diam sagittis vitae. Donec eros tellus, semper non nibh quis, egestas auctor felis. Duis at interdum sapien. Donec sagittis turpis turpis, at commodo justo lobortis at. Duis efficitur lacus leo, vitae interdum ante pharetra et. Donec sapien diam, semper vitae neque at, posuere scelerisque quam.

Mauris ac porttitor nibh, eu tristique magna. Suspendisse auctor posuere est vitae commodo. Nam semper dictum...

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;
    width: 600px;
    max-width: 80%;
    margin: 0 auto;
    padding: 2rem;
    display: none;
    margin-bottom: 3rem;
  }
  
  &:hover,
  &--active{
    .display__header {
      min-height: 20px;
      margin-top: 3rem;
      margin-bottom: 3rem;
    }
    .display__content {
      display: block;
    }
  }
}