JSFiddle - React, Tailwind, and code Playground

HTML

<div id="h2g2">
  <ul id="codez">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<script>/*!
 * insHide jQuery plugin
 * Original author: @guenoz
 */

;(function ( $, window, document, undefined ) {

    var pluginName = 'inshide',
        defaults   = {
            minimum  : 100,
            reset    : false,
            classhin : 'in',
            classhout: 'out',
            classlast: 'lastin'
        };

    $.fn.extend({
         
        inshide: function(options) {
                 
            var options = $.extend(defaults, options),
                  nbIn = nbOut = 0,
                   mini = ( options.minimum / 100 ) || 1,
                   that = $(this),
                      p = that.parent(),
                 height = p.outerHeight(),
                  width = p.outerWidth(),
                      o = p.offset(),
                   left = o.left,
                    top = o.top,
                    ret = [],
                 passed = firstOutHidden = false,
                 lastIn = -1;
            
            if (options.reset) {
                options.reset = false;
                return that.children().removeClass(options.classhin + ' ' + options.classhout + ' ' + options.classlast);
            }
            
            that.children().removeClass(options.classhin + ' ' + options.classhout + ' ' + options.classlast);
 
            this.each(function() {
                        
                that.children().each(function() {
                    
                    var c = $(this);
                    
                    if(this == document.documentElement)
                        return ret.push(this);
                    
                    var offset = c.offset(),
                        ew = c.outerWidth(),
                        eh = c.outerHeight();
                        
                    res = !(
                           ( offset.top  + ( eh * mini ) > top +...

CSS

.OutsideMyParent {
  opacity: 0.2;
  background-color: red;
}
.insideMyParent {
  background-color: green;
}
.insideMyParent:before {
  content:"Inside";
  display: block;
}
.LastShowedOfMyParent {
  background-color: gold;
}
.LastShowedOfMyParent:before {
  content:"Last In";
  display: block;
}
#h2g2 {
  width: 77px;
  height: 85px;
  /*padding: 5px;*/
  margin: 0;
  top: 82px;
  left: 82px;
  position: absolute;
  border: 3px solid navy;
  /*overflow: hidden;*/
}
#h2g2:after {
  content:"imagine anything outside the border is hidden";
  display: block;
  color: navy;
  position: absolute;
  top: 0;
  right: -160px;
  width : 150px;
}
#codez {
  /*padding: 5px;*/
  margin: 0;
  position: relative;
}
li {
  /*margin: 5px;*/
  padding: 10px;
  float: left;
  width: 55px;
  border: 1px solid;
  position: relative;
  font-size: 10px;
  height: 10px;
}

JavaScript

$('#codez').inshide({
  classhin: 'insideMyParent',
  classhout: 'OutsideMyParent',
  classlast: 'LastShowedOfMyParent'
});

// Append children and move all towards top of parent
$('#codez')
  .delay(2000) // the time for you to get focused
.animate({
  'top': '-70px'
}, 500, function () {
  // onAfterAnimation Callback
  $('#codez').inshide({
    classhin: 'insideMyParent',
    classhout: 'OutsideMyParent',
    classlast: 'LastShowedOfMyParent',
    minimum: 80
  });
});