JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slide one"><span>jquery info</span>content 1</div>
<div class="slide two">
     <span>jquery info</span>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
     content 2<br>
</div>
<div class="slide three"><span>jquery info</span>content 3</div>
<div class="slide four"><span>jquery info</span>content 4</div>

CSS

html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
.slide {
     min-height: 100%;
     padding: 25px;
     position: relative;
}
.one {
     background-color: blue;
}
.two {
     background-color: red;
}
.three {
     background-color: green;
}
.four {
     background-color: orange;
}
.slide span {
     background-color: white;
     padding: 5px 10px;
     position: absolute;
     top: 15px;
     right: 15px;
}

JavaScript

function slideHeights() {

     var viewportHeight = $(window).height();

     $('.slide').each(function(){

          var elem = $(this);
          var span = elem.children('span');

          // reset so we can get the correct height of element each time
          elem.css({'height':'auto'});

          var slideHeight = elem.height();  // height of content in slide

          if ( viewportHeight > slideHeight ) {
               height = viewportHeight;
          } else {
               height = slideHeight;
          }

          elem.css('height',height);

          var text = 'viewportHeight: ' + viewportHeight + ', slideHeight: ' + slideHeight + ', height: ' + height;
          span.text(text);

     });

}

$(document).ready(function(){
     slideHeights();  // for page load
     $(window).resize(slideHeights);  // for window resize
});