JSFiddle - React, Tailwind, and code Playground

by dkrotts

HTML

<!doctype html>
<html ng-app>
  <head>
    <script src="http://code.angularjs.org/angular-1.0.0rc10.min.js"></script>
  </head>
  <body>
    <div ng-controller="ListCtrl">
      <ul>
        <li ng-repeat="person in people">
            {{$index + 1}}. <strong>{{person.name}}</strong>, <em>{{person.title}}</em>
        </li>
      </ul>
      <h1>Total People: {{people.length}}</h1>
    </div>
  </body>
</html>

CSS

body { margin: 20px; }
h1 {
  display: block;
  font-size: 22pt;
  margin: 10px 0 0 0;
}
strong { font-weight: bold; }
em { font-style: italic; }

JavaScript

function ListCtrl($scope) {
  $scope.people = [
    { name: 'Superman', title: 'Superhero' },
    { name: 'Clark Kent', title: 'NOT Superman' },
    { name: 'Lex Luthor', title: 'Super Villain' },
    { name: 'Lois Lane', title: 'Reporter' },
    { name: 'Perry White', title: 'Editor-in-chief' }
  ];    
}