JSFiddle - React, Tailwind, and code Playground

by rapsac

HTML

<div class="container" ng-app="gemStore">
    <div class="product row">
         <h1>Store Name</h1>

    </div>
    <div ng-controller="StoreController as store">
        <div class="product row" ng-repeat="product in store.products">
             <h3>{{product.name}} <em class="pull-right">{{product.price | currency}}</em></h3>

            <button ng-show="product.canPurchase">Add to Cart</button>
        </div>
    </div>
</div>

SCSS

body {
    background: #333333;
    color: white;
}
h1 {
    color: green;
}

JavaScript

(function () {
    var app = angular.module('gemStore', []);
    var gems = [{
        name: 'Azurite',
        price: 2.95,
        canPurchase: true
    }, {
        name: 'Bloodstone',
        price: 5.95,
        canPurchase: false
    }, {
        name: 'Zircon',
        price: 3.95,
        canPurchase: true
    }, ];


    app.controller('StoreController', function () {
        this.products = gems;
    });


})();