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

.viewportOut{
    background: red;
    width:200px;
    margin:100px auto;
    -webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
     
    
}

.transition {
    -webkit-transform: scale(1.6); 
    -moz-transform: scale(1.6);
    -o-transform: scale(1.6);
    transform: scale(1.6);
}

JavaScript

$(document).ready(function(){
    $('.viewportOut').hover(function() {
        $(".viewportOut").addClass('transition');
    }, function() {
        $(".viewportOut").removeClass('transition');
    });
});