JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
    <div class="page">

        <div id="main">
            <ul>
                <li><span class="alignedCaption">Make: </span>
                    <select data-bind="options: makes, value: selectedMake, optionsText: 'name', optionsCaption: 'Choose a make'">
                    </select>
                    <!-- ko with: makes() -->
                    <span data-bind="text:length" class="textValues"></span>
                    <!-- /ko -->
                </li>
                <li><span class="alignedCaption">Model: </span>
                    <select data-bind="options: models, value: selectedModel, optionsText: 'name', optionsCaption: 'Choose a model'">
                    </select>
                    <!-- ko with: models() -->
                    <span data-bind="text:length" class="textValues"></span>
                    <!-- /ko -->
                </li>
                <li><span class="alignedCaption">Car: </span>
                    <select data-bind="options: cars, value: selectedCar, optionsText: 'desc', optionsCaption: 'Choose a car'">
                    </select>
                    <!-- ko with: cars() -->
                    <span data-bind="text:length" class="textValues"></span>
                    <!-- /ko -->
                </li>
            </ul>
            <div class="carResults">
                <span class="caption">Your Selections</span>
                <div>
                    <span>selectedMake:</span>
                    <!-- ko with: selectedMake-->
                    <span data-bind="text:name" class="textValues"></span>
                    <!-- /ko -->
                </div>
                <div>
                    <span>selectedModel:</span>
                    <!-- ko with: selectedModel-->
                    <span data-bind="text:name" class="textValues"></span>
                    <!-- /ko -->
                </div>
              ...

CSS

@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 UI', Arial,...

JavaScript

ko.utils.stringStartsWith = function (string, startsWith) {            
            string = string || "";
            if (startsWith.length > string.length)
                return false;
            return string.substring(0, startsWith.length) === startsWith;
};


var my = {};

// The "Models"
// The Product function creates new Product Models.
// In this case, we use a function to create the Car Model to make 
// it easier to extend with a computed member. The properties are 
// observables, but they only need to be if they should notify their changes.
my.Car = function() {
    var self = this;
    self.key = ko.observable();
    self.color = ko.observable();
    self.year = ko.observable();
    self.modelKey = ko.observable();
    self.desc = ko.computed(function() {
        return self.year() + " " + self.color();
    }, self);
};

// Set up the Models.
// We use object literals here to show another way to create Models.
// Properties are not observable in this case. Depends if you want 
// them to notify of changes.
my.data = (function() {
    var
    allMakes = ko.observableArray([
        {
        name: "Lexus",
        key: "L"},
    {
        name: "BMW",
        key: "B"}]),
        allModels = ko.observableArray([
            {
            name: "ISF",
            makeKey: "L",
            key: "1"},
        {
            name: "IS350",
            makeKey: "L",
            key: "2"},
        {
            name: "ES350",
            makeKey: "L",
            key: "3"},
        {
            name: "Z3",
            makeKey: "B",
            key: "4"},
        {
            name: "i335",
            makeKey: "B",
            key: "5"},
        {
            name: "i735",
            makeKey: "B",
            key: "6"}]),
        allCars = ko.observableArray([
            new my.Car().key("ASD928K1").color("red").year(2008).modelKey("1"),
            new my.Car().key("KJAS90U2").color("red").year(2011).modelKey("1"),
            new...