JSFiddle - React, Tailwind, and code Playground

by rainymaple

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
        <div id="main">
            <div class="showroom">
                <div>
                    <table>
                        <thead>
                            <tr><th></th><th>Product</th><th>Price</th><th>Quantity</th><th>Ext. Price</th><th></th></tr>
                        </thead>
                        <tbody data-bind="foreach: lines">
                            <tr>
                                <td style="width: 25px;">
                                    <select data-bind="options:$parent.products, value:product, optionsText: 'shortDesc', optionsCaption:'Select a product ...'">
                                    </select>
                                </td>
                                <td style="width: 50px;" data-bind="if: product">
                                    <div>
                                        <img data-bind="attr: {src: product().photoUrl, alt:product().shortDesc, title:product().shortDesc}"
                                             class="photoThumbnail" />
                                    </div>
                                    <div>
                                        <div data-bind="text: product().model().brand" class="textValues">
                                        </div>
                                        <div data-bind="text: product().model().name" class="textValues">
                                        </div>
                                    </div>
                                </td>
                                <td data-bind="if: product" style="width: 100px;">
                                    <span data-bind="text: my.formatCurrency(product().salePrice())" class="textValues">
                                    </span>
                                </td>
                                <td style="width: 100px;">
                                    <input...

CSS

em{font-weight:bold;}
@font-face {
    font-family: 'SansationRegular';
    src: url('../fonts/Sansation_Regular-webfont.eot');
    src: url('../fonts/Sansation_Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Sansation_Regular-webfont.woff') format('woff'),
         url('../fonts/Sansation_Regular-webfont.ttf') format('truetype'),
         url('../fonts/Sansation_Regular-webfont.svg#SansationRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationLight';
    src: url('../fonts/Sansation_Light-webfont.eot');
    src: url('../fonts/Sansation_Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Sansation_Light-webfont.woff') format('woff'),
         url('../fonts/Sansation_Light-webfont.ttf') format('truetype'),
         url('../fonts/Sansation_Light-webfont.svg#SansationLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SansationBold';
    src: url('../fonts/Sansation_Bold-webfont.eot');
    src: url('../fonts/Sansation_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Sansation_Bold-webfont.woff') format('woff'),
         url('../fonts/Sansation_Bold-webfont.ttf') format('truetype'),
         url('../fonts/Sansation_Bold-webfont.svg#SansationBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {padding : 10px; }
body, input, select {font: 14px 'Segoe UI', 'SansationRegular', Arial, sans-serif;}
.page {    
}
.showroom {
}
.header 
{
    margin-bottom: 20px;
}
span {
    /*font: 12px 'SansationRegular', 'Segoe UI', Arial, sans-serif;*/
    margin: 0 4px 0 4px;
    color: black;
}
/*
ul li span { 
        float: left;
        width: 40px;
}
*/
.alignedCaption {
        float: left;
        width: 40px;
}
/*.text*/
.textValues {
    margin: 0 4px 0 4px;
    color: rgb(47, 123, 163);
}
.caption {
    /*font: 12px 'SansationBold', 'Segoe...

JavaScript

my.dataservice = (function (my) {
    "use strict";
    var getProducts = function () {
        return my.sampleData;
    };
    return {
        getProduct: getProducts
    };
})(my);

my.sampleData = (function (my) {    
    "use strict";
    var data = { Products: [
                        { "ModelId": 1, "SalePrice": 1649.01, "ListPrice": 2199.00, "Rating": 5, "Photo": "Taylor 314-CE Left-Handed Grand Auditorium Acoustic-Electric Guitar.png", "CategoryId": 1, "ItemNumber": "T314CE", "Description": "Taylor 314-CE Left-Handed Grand Auditorium Acoustic-Electric Guitar", "Reviews": [{ "ProductId": 4, "ReviewerName": "guitarhero", "Description": "This guitar has never let me down. I gig 3-6 nights a week and the 314CE just keeps on ticking. Change the battery and the strings regularly and she sounds like a dream everytime. If you want great sound, playability, dependability and just great playing fun get this guitar. You won\u0027t be sorry.", "ReviewDate": "\/Date(1302181440000)\/", "Id": 3 }, { "ProductId": 4, "ReviewerName": "billyjack", "Description": "Best guitar ever!", "ReviewDate": "\/Date(1302218040000)\/", "Id": 4}], "Model": { "Name": "314ce", "Brand": "Taylor", "Id": 1 }, "Category": { "Name": "Acoustic Guitars", "Id": 1 }, "Id": 4 },
                        { "ModelId": 3, "SalePrice": 4775.00, "ListPrice": 7199.00, "Rating": 5, "Photo": "T814ce_tobacco+sunburst.jpg", "CategoryId": 1, "ItemNumber": "T814CE", "Description": "Taylor 814-CE Acoustic Electric Guitar in Tobacco Sunburst",
                            "Reviews": [],
                            "Model": { "Name": "814ce", "Brand": "Taylor", "Id": 3 },
                            "Category": { "Name": "Acoustic Guitars", "Id": 1 }, 
                            "Id": 3 },
                        { "ModelId": 4, "SalePrice": 5899.00, "ListPrice": 7999.00, "Rating": 5, "Photo": "T914CE.jpg", "CategoryId": 1, "ItemNumber": "T914CE", "Description": "Taylor 814-CE Acoustic Electric Guitar",...