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'}
]">all friends: {{friends.length}}
        <br/>filtered friends: {{filteredFriends.length}}
        <br/>limited and filtered friends: {{limitedFilteredFriends.length}}
        <br/>
        <input type="search" ng-model="q" placeholder="filter friends..." aria-label="filter friends" />
        <ul class="example-animate-container">
            <li class="animate-repeat" ng-repeat="friend in limitedFilteredFriends = (filteredFriends = (friends | filter:q) | limitTo:2)">{{friend.name}} who is {{friend.age}} years old.</li>
        </ul>
    </div>
</div>