JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<div class="viewportOut">
    <div class="L3">
    <ul id="claims-list2" class="list-group">
  <li><a href="#" class="list-group-item claim-item">Claim 1</a></li>
  <li><a href="#" class="list-group-item claim-item">Claim 2</a></li>
  <li><a href="#" class="list-group-item claim-item">Claim 3</a></li>
  <li><a href="#" class="list-group-item claim-item">Claim 4</a></li>
  <li><a href="#" class="list-group-item claim-item">Claim 5.</a></li>
</ul>
    </div>
</div>
</div>

CSS

.viewportIn div {
position:absolute; top:0; right:0; bottom:0; left:0;
    margin:auto;
    width:300px;
    height: 200px;
    max-width:100%;
    max-height:100%;
}

.viewportOut div {
position:fixed; top:0; right:0; bottom:0; left:0;
    margin:auto;
    width:300px;
    height: 200px;
    max-width:100%;
    max-height:100%;
}
.L3 {
    overflow: hidden;
    background: red;
    border: 2px red solid;

}

JavaScript

$(document).ready(function () {
        $('.viewportOut').mouseenter(function(e){
        $(".L3").animate({
        opacity:"1", 
        zoom: '1%'
        }, function(){ $(".L3").animate({
        opacity:"1", 
        zoom: '100%'
        });});
              
    });   
});