JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="">
    <div ng-init="friends = [
    {name:'John', age:25, gender:'boy'},
    {name:'Jessie', age:30, gender:'girl'},
    {name:'Johanna', age:28, gender:'girl'},
    {name:'Joy', age:15, gender:'girl'},
    {name:'Mary', age:28, gender:'girl'},
    {name:'Peter', age:95, gender:'boy'},
    {name:'Sebastian', age:50, gender:'boy'},
    {name:'Erika', age:27, gender:'girl'},
    {name:'Patrick', age:40, gender:'boy'},
    {name:'Samantha', age:60, gender:'girl'}
  ]">
    <ul class="example-animate-container">
      <li ng-repeat="friend in friends | limitTo: 5">
        [{{$index}}] {{friend.name}} is {{friend.age}} years old.
      </li>
        <li>extra content</li>
      <li ng-repeat="friend in friends | limitTo: 10" ng-if="$index > 5">
        [{{$index}}] {{friend.name}} is {{friend.age}} years old.
      </li>        
    </ul>
  </div>
</div>