JSFiddle - React, Tailwind, and code Playground

by niden

HTML

<script src="http://code.angularjs.org/1.0.0rc5/angular-1.0.0rc5.min.js"></script>
<script src="http://code.angularjs.org/1.0.0rc5/angular-resource-1.0.0rc5.min.js"></script>
<div ng-app='MF' id='container' ng-controller="OrgDirectoryCtrl">
    <div class='directory_results'>
        {{orgResult.text_results}}
    </div>
    <div class='directoryResults org_directory'>
        <table class='directory_list admin_members_list'>
            <thead>
                {{orgResult.print_sponsor}}
                <th class='list_avatar'></th>
                <th class='list_name'>{{orgResult.text_name}}</th>
                <th class='list_company'>{{orgResult.text_city}}</th>
                <th class='list_company'>{{orgResult.text_region}}</th>
                {{orgResult.print_actions}}
            </thead>
            <tbody>
                <tr class='directory_item member_single odd' ng-repeat='org in orgResult.results'>
                    <td class='list_avatar'>{{org.avatar}}</td>
                    <td class='list_name'>{{org.name}}</td>
                    <td class='list_company'>{{org.city}}</td>
                    <td class='list_company'>{{org.region}}</td>
                    <td class='list_actions'>{{org.actions}}</td>
                </tr>
            </tbody>
        </table>
        <div class='paginator'>
        <ul>
            <li ng-class='isCurrentClass(page)' ng-repeat="page in orgResult.pages">{{page}}</li>
        </ul>
        <span>{{orgResult.page_range}}</span> 
    </div>
</div>

CSS

#container .paginator ul li.inactive,
#container .paginator ul li.inactive:hover {
    background-color:#ededed;
    color:#bababa;
    border:1px solid #bababa;
    cursor: default;
}
#container .paginator {
    width: 800px;
    height: 25px;
}
#container .paginator ul li {
    list-style: none;
    float: left;
    border: 1px solid #006699;
    padding: 2px 6px 2px 6px;
    margin: 0 3px 0 3px;
    font-family: arial;
    font-size: 14px;
    color: #006699;
    font-weight: bold;
    background-color: #f2f2f2;
}
#container .paginator ul li:hover {
    color: #fff;
    background-color: #006699;
    cursor: pointer;
}
#container .paginator ul li.current {
    color:#fff;
    background-color:#006699;
}

JavaScript

angular.module('MF', ['ngResource']);

function OrgDirectoryCtrl($scope) {
    //    $scope.organizations = $resource('/organizations/index/:action',
    //        {action:'getng'}
    //    );
    // $scope.orgResult = $scope.organizations.get();
    $scope.orgResult = {
        "text_view_org": "view organization",
        "text_view_members": "view members",
        "text_sponsor": "sponsors",
        "text_name": "name",
        "text_city": "city",
        "text_region": "region",
        "text_actions": "actions",
        "text_results": "84 results found",
        "page_current": "1",
        "page_range": "1-10 of 84 results",
        "pages": {
            "1": "1",
            "2": "2",
            "3": "3",
            "4": "4",
            "5": "5",
            "6": "6",
            "7": "7",
            "8": "8",
            "9": "9"
        },
        "print_sponsor": false,
        "print_actions": true,
        "results": [{
            "429295": {
                "id": "429295",
                "class": "",
                "checkbox": "",
                "name": "123",
                "avatar": "http:\/\/c0416651.cdn.cloudfiles.rackspacecloud.com\/org_default.jpg?1333579972",
                "city": "Lalaland",
                "region": ""
            },
            "429296": {
                "id": "429296",
                "class": "",
                "checkbox": "",
                "name": "123a",
                "avatar": "http:\/\/c0416651.cdn.cloudfiles.rackspacecloud.com\/org_default.jpg?1333579972",
                "city": "",
                "region": ""
            },
            "429294": {
                "id": "429294",
                "class": "",
                "checkbox": "",
                "name": "abc",
                "avatar": "http:\/\/c0416651.cdn.cloudfiles.rackspacecloud.com\/org_default.jpg?1333579972",
                "city": "",
                "region": ""
            },
            "410115": {
                "id":...