JSFiddle - React, Tailwind, and code Playground

HTML

<div class="site-header" style="position:fixed;top:0px;height:113px;width:100px;border:1px solid black;"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS

.box-shadow {
    background-color:red;
}

JavaScript

$(window).scroll(function() {
         var _val = $(window).scrollTop();

         if(_val > 113) {
             if (!$('.site-header').hasClass('box-shadow')) {
                 $('.site-header').animate({
                     height          : '73px'
                 }, 'fast').addClass('box-shadow');
         
                 $('.main-navigation').stop().animate({
                     marginTop       : '10px'
                 }, 'fast');
                 
                 $('.site-title').stop().animate({
                     height          : '43px',
                     width           : '69px',
                     backgroundSize  : '100%'
                 }, 'fast');
         
                 $('.site-title a').css({
                     height          : '43px',
                     width           : '69px'
                 });
             }
         } else {
             if ($('.site-header').hasClass('box-shadow')) {
                 $('.site-header').stop().animate({
                     height          : '113px'
                 }, 'fast').removeClass('box-shadow');
         
                 $('.main-navigation').stop().animate({
                     marginTop       : '30px'
                 }, 'fast');
                 
                 $('.site-title').stop().animate({
                     height          : '83px',
                     width           : '134px'
                 }, 'fast');
         
                 $('.site-title a').css({
                     height          : '83px',
                     width           : '134px'
                 });
             }
         }
     });