JSFiddle - React, Tailwind, and code Playground

HTML

<p id="demo" onclick="myFunction()">Click me</p>
<div id="main" class="container">
   <div id = "headContainer" class ="header">
     <div class="mtext"> </div> 
     <div class="mtext2"> </div>
     <div id ="myAnimation" class="mtext3"> </div>
   </div>  
   <div class ="footer"></div>
</div>

CSS

.container{
  width:100%;
  height: 640px;    
  overflow:hidden;
  padding:0 18px;
  position:relative;
}

.header{
  background: blue;
  height: 360px;  
  min-height:60px;
  transition: all 2.8s linear;
}

.footer {
  background: gray;
  height: 180px;
}

.HeaderText{
  padding: 50px 10px;
  color: black;
  text-align: center;
  font-size: 90px; 
  font-weight: bold;
  position:fixed;
  top: 0;
  width: 100%;
  transition: 0.2s;
}

.mtext{ 
  height:60px;
  background-color:pink;
}

.mtext2{
  height:60px;
  background-color:green;
  width:100px;
}

.mtext3{
  height:60px;
  background-color:orange;
  width:100px;
  position :relative;
}

@keyframes mymove {
  from {top: 12px;}
  to {top: 100px;}
}

JavaScript

var pos = 20;
document.getElementById("demo").addEventListener("click", myFunction);
function myFunction() {
    var elem = document.getElementById("myAnimation"); 
    document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
     pos = pos - 20;
     document.getElementById("headContainer").style.height =  pos + "px";
     
     var toppos = 120;
    var id = setInterval(frame, 30);
    function frame() {
      if (toppos == 0) {
        clearInterval(id);
      } else {
        toppos--; 
        elem.style.top = toppos + 'px'; 
        elem.style.left = toppos + 'px'; 
      }
    }
}
//window.onscroll = function() {scrollFunction()};

function scrollFunction() {

console.log(pos);

    if (document.body.scrollTop > 50 ||            document.documentElement.scrollTop > 50) {
     pos = pos - 1;
      document.getElementById("headContainer").style.height =  pos + "px";
    } else {
        //document.getElementById("HeadText").style.fontSize = "90px";
    }
}