JSFiddle - React, Tailwind, and code Playground

by toddmotto

HTML

<div ng-app="app" ng-controller="UserCtrl as user">
  <input type="text" placeholder="Type to filter" ng-model="username">
  <ul>
    <li ng-repeat="user in user.filteredUsers | filter:username">
      {{ user.name }}
    </li>
  </ul>
</div>

CSS

</style>
<script src="//code.angularjs.org/1.5.0-rc.0/angular.min.js"></script>
<style>
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}
body {
  font: 300 14px/1.4 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: #eee;
  margin: 0;
  padding: 0;
}

div[ng-app] {
  padding: 35px;
}

input {
  font-size: 14px;
  outline: 0;
  border: 0;
  padding: 5px 10px;
  border-radius: 3px;
}

JavaScript

function UserCtrl($filter) {
	var users = [{
  	name: 'Todd Motto'
  },{
  	name: 'Ryan Clark'
  },{
  	name: 'Niels den Dekker'
  },{
  	name: 'Jurgen Van de Moere'
  },{
  	name: 'Jilles Soeters'
  }];
  
  this.filteredUsers = users;
  
}

angular
	.module('app', [])
  .controller('UserCtrl', UserCtrl);