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="leftFloat">
   <div> <span class="caption">Select a Product</span> </div>
   <ul data-bind="foreach:products" class="smallList">
      <li data-bind="css: { selected: isSelected}" class="selectable">
         <div data-bind="text: shortDesc, click:$root.selectProduct"> </div>
      </li>
   </ul>
 </div>
 <div data-bind="if: selectedProduct()" >
    <div class="productDetailsArea">
      <div>
          <input type="checkbox" data-bind="checked: showDetails" /><span>Expand Details</span>
      </div>
      <div data-bind="template: {name: productView}"></div>
      <script id="productSummary" type="text/html">
          <div data-bind="with: selectedProduct().model">
              <div> <span>Brand: </span><span data-bind="text: brand" class="textValues"></span> </div>
              <div> <span>Model: </span><span data-bind="text: name" class="textValues"></span> </div>
          </div>
      </script>
      <script id="productDetails" type="text/html">
          <div data-bind="with: selectedProduct">
            <div> <span>Brand: </span><span data-bind="text: model().brand" class="textValues"></span> </div>
            <div> <span>Model: </span><span data-bind="text: model().name" class="textValues"></span> </div>
            <div>
             <span>Price: </span><span data-bind="text: my.formatCurrency(salePrice())" class="textValues"> </span>
            </div>
            <div> <span>Description:</span></div>
            <div> <span data-bind="text: description" class="textValues"></span> </div>
          </div>
      </script>
   </div>
</div>
</div>

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;
}
*/
.leftFloat {
    float: left;
}
.alignedCaption {
        float: left;
        width: 40px;
}
/*.text*/
.textValues {
    margin: 0 4px 0 4px;
    color: rgb(47, 123, 163);
}
.caption {
    /*font:...

JavaScript

var my = my || {}; //my namespace
ko.utils.stringStartsWith = function(string, startsWith) {
    string = string || "";
    if (startsWith.length > string.length) return false;
    return string.substring(0, startsWith.length) === startsWith;
};
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,
        ...