JSFiddle - React, Tailwind, and code Playground

by mmarkey

HTML

<div ng-app ng-controller="PhoneListCtrl" class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <!--Sidebar content-->Search:
            <input ng-model="query">Sort by:
            <select ng-model="orderProp">
                <option value="name">Alphabetical</option>
                <option value="age">Newest</option>
            </select>
        </div>
        <div class="span10">
            <!--Body content-->
            <dl>
                <div ng-repeat="phone in phones | filter:query | orderBy:orderProp"
                <dt> 
                     <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
                </dt>
                <dd>
                    <p>{{phone.snippet}}</p>
                </dd>
                </div>
            </dl>
            <!-- Experiments 1-->
            <p>You want {{query}}?</p>
            <p>{{hello}}</p>
            <table>
                <tr>
                    <th>row number</th>
                </tr>
                <tr ng-repeat="i in [0, 1, 2, 3, 4, 5, 6, 7]">
                    <td>{{i+1}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>

CSS

body {
    padding-top: 20px;
}
.phones {
    list-style: none;
}
.thumb {
    float: left;
    margin: -1em 1em 1.5em 0em;
    padding-bottom: 1em;
    height: 100px;
    width: 100px;
}
.phones li {
    clear: both;
    height: 100px;
    padding-top: 15px;
}
/** Detail View **/
 img.phone {
    float: left;
    border: 1px solid black;
    margin-right: 3em;
    margin-bottom: 2em;
    background-color: white;
    padding: 2em;
    height: 400px;
    width: 400px;
}
ul.phone-thumbs {
    margin: 0;
    list-style: none;
}
ul.phone-thumbs li {
    border: 1px solid black;
    display: inline-block;
    margin: 1em;
    background-color: white;
}
ul.phone-thumbs img {
    height: 100px;
    width: 100px;
    padding: 1em;
}
ul.phone-thumbs img:hover {
    cursor: pointer;
}
ul.specs {
    clear: both;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul.specs > li {
    display: inline-block;
    width: 200px;
    vertical-align: top;
}
ul.specs > li > span {
    font-weight: bold;
    font-size: 1.2em;
}
ul.specs dt {
    font-weight: bold;
}
h1 {
    border-bottom: 1px solid gray;
}
/*!
 * Bootstrap Responsive v2.0.3
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
 .clearfix {
    *zoom:1
}
.clearfix:before, .clearfix:after {
    display:table;
    content:""
}
.clearfix:after {
    clear:both
}
.hide-text {
    font:0/0 a;
    color:transparent;
    text-shadow:none;
    background-color:transparent;
    border:0
}
.input-block-level {
    display:block;
    width:100%;
    min-height:28px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box
}
.hidden {
    display:none;
    visibility:hidden
}
.visible-phone {
    display:none!important
}
.visible-tablet {
    display:none!important
}
.hidden-desktop {
   ...

JavaScript

'use strict';

/* Controllers */

function PhoneListCtrl($scope) {
    $scope.phones = [{
        "name": "Nexus S",
            "snippet": "Fast just got faster with Nexus S.",
            "age": 0

    }, {
        "name": "Motorola XOOM™ with Wi-Fi",
            "snippet": "The Next, Next Generation tablet.",
            "age": 1
    }, {
        "name": "MOTOROLA XOOM™",
            "snippet": "The Next, Next Generation tablet.",
            "age": 2
    }];

    $scope.hello = "They're great!"

}