JSFiddle - React, Tailwind, and code Playground

by Eugene Krevenets

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<div ng-app>
    <div class="container"
         ng-controller="ListCtrl">
        <form class="form-horizontal" role="form">
            <div class="form-group">
                <label for="nameFilter" class="col-sm-2 control-label">Name:</label>
                <div class="col-sm-10">
                    <input id="nameFilter" type="text" class="form-control" placeholder="Filter"
                    ng-model="nameFilter"/>
                    
                </div>
            </div>
        </form>
        <table class="table table-bordered">
            <tr ng-repeat="item in list | filter:{name:nameFilter}">
                <td class="hidden-xs hidden-sm">
                    <img ng-src="{{item.picture}}"/>
                </td>
                <td>
                <a ng-href="mailto:{{item.email}}">{{item.name}}</a></td>
                <td class="hidden-xs hidden-sm">{{item.favoriteFruit}}</td>
            </tr>                 
        </div>
    </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
</div>

JavaScript

function ListCtrl($scope) {
    getPeople(function(data) {
        $scope.$apply(function() {
            $scope.list = data;
        });
    });
}





//---------------------


function getPeople(callback){
setTimeout(function(){
callback([
  {
    "index": 0,
    "picture": "http://placehold.it/32x32",
    "eyeColor": "brown",
    "email": "[email protected]",
    "favoriteFruit": "pear"
  },
  {
    "index": 1,
    "picture": "http://placehold.it/32x32",
    "eyeColor": "hazel",
    "name": "Beth Wong",
    "email": "[email protected]",
    "favoriteFruit": "strawberry"
  },
  {
    "index": 2,
    "picture": "http://placehold.it/32x32",
    "eyeColor": "brown",
    "name": "Dona Singleton",
    "email": "[email protected]",
    "favoriteFruit": "peach"
  },
  {
    "index": 3,
    "picture": "http://placehold.it/32x32",
    "eyeColor": "gray",
    "name": "Ayala Robbins",
    "email": "[email protected]",
    "favoriteFruit": "orange"
  },
  {
    "index": 4,
    "picture": "http://placehold.it/32x32",
    "eyeColor": "hazel",
    "name": "Wood Best",
    "email": "[email protected]",
    "favoriteFruit": "pear"
  },
  {
    "index": 5,
    "picture": "http://placehold.it/32x32",
    "eyeColor": "hazel",
    "name": "Wynn Goff",
    "favoriteFruit": "peach"
  },
  {
    "index": 6,
    "picture": "http://placehold.it/32x32",
    "eyeColor": "brown",
    "name": "Rosales Hodges",
    "email": "[email protected]",
    "favoriteFruit": "apple"
  },
  {
    "index": 7,
    "picture": "http://placehold.it/32x32",
    "eyeColor": "blue",
    "name": "Reyes Hinton",
    "email": "[email protected]",
    "favoriteFruit": "clementine"
  },
  {
    "index": 8,
    "picture": "http://placehold.it/32x32",
    "eyeColor": "blue",
    "name": "Bob Norton",
    "email": "[email protected]",
    "favoriteFruit": "potato"
  },
  {
    "index":9,
    "picture": "http://placehold.it/32x32",
    "eyeColor": "blue",
    "name": "Sherry Bobbins",
    "email":...