JSFiddle - React, Tailwind, and code Playground

by fredrik

HTML

<link href="http://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet" type="text/css">
    
<div data-ng-app>
        <div data-ng-controller="ListController" class="ng-scope">
            <h1>Angular Demo</h1>
            <p>It's like magic</p>
            <button data-ng-click="showComments()">Show comments</button>
            <ul>
                <li data-ng-repeat="comment in list" data-ng-controller="CommentController">
                    <span data-ng-hide="editMode">{{ comment.content }}</span>
                    <input type="text" data-ng-show="editMode" data-ng-model="comment.content">
                    <button type="button" data-ng-click="editMode = !editMode">
                        <span data-ng-hide="editMode" style="">Edit</span>
                        <span data-ng-show="editMode">Save</span>                        
                    </button>
                </li>
            </ul>    
    </div>
</div>

CSS

body, button {
    font-family: 'Ubuntu', sans-serif;
}

p {
    margin: 4px 0;
}

button {
    padding: 4px;
    color: #fff;
    border: 1px solid #314f70;
    border-radius: 2px;
    background-image: -webkit-linear-gradient(top, #456da0, #38658e);
    background-repeat: repaeat-x;
}

li {
    padding: 4px;
    margin-bottom: 4px;
    overflow: hidden;
    line-height: 26px;
    font-size: 12px;
    border: 1px solid #e2e2e2;
    border-radius: 2px;
    
}

li button {
    float: right;
}

li span {
    display: block;
    float: left;
    width: 70%;
    padding-left: 1px;
}

li input {
    display: block;
    float: left;
    width: 70%;
    height: 22px;
    font-size: 12px;
    border: 1px solid #e2e2e2;
    border-radius: 2px;
}

JavaScript

(function (window) {
    "use strict";
    function ListController ($scope) {
        $scope.list = [];

        var comments = [{
            content: 'Hello, earth!'            
        }, {
            content: 'Hello, world!'            
        }, {
            content: 'Hello, cloudnine!'            
        }];
    
        $scope.showComments = function () {
            $scope.list = comments;  
        };
    }
    
   function CommentController ($scope) {
       $scope.editMode = false;          
   }
            
    window.ListController = ListController;
    window.CommentController = CommentController;
}(window));