JSFiddle - React, Tailwind, and code Playground

HTML

<ul data-bind="template: { name: 'cart-item-template', foreach: cartItems, beforeRemove: CartPackage.beforeRemove }">
</ul>
<div id="running-totals">
    <div data-bind="visible: cartItems().length > 0">
        <div><strong>Subtotal</strong></div>
        <div>USD <span data-bind="formatUSD: CartPackage.totalSurcharge()"></span></div>
    </div>
</div>
<div class="call-to-action" data-bind="visible: cartItems().length > 0">
    <div class="split">
        <div class="messages">&nbsp;</div>
        <div class="actions">
            <button class="cancel">Continue Shopping</button>
            <button class="action">Checkout</button>
        </div>
    </div>
</div>

<script type="text/html" id="cart-item-template">
    <li>
        <button data-bind="click: CartPackage.removeItem">Delete</button>
        <ul>
            <li data-bind="attr: {'class': itemType}">
                <div class="details">
                    <h5><strong data-bind="text: itemName"></strong><!-- ko if: itemType() === 'desktop' --> Desktop fonts<!-- /ko --><!-- ko if: itemType() === 'webfont' --> Webfonts<!-- /ko --></h5>
                    <p data-bind="text: itemDesc"></p>
                </div>
                <div class="quantity">
                    <!-- ko if: itemType() === "subscription" --><select data-bind='options: SubscriptionData, optionsText: "name", optionsValue: "price", value: itemPrice'></select><!-- /ko -->
                    <!-- ko if: itemType() === "desktop" || itemType() === "webfont" --><select data-bind='options: DesktopData, optionsText: "name", optionsValue: "price", value: itemPrice'></select><!-- /ko -->
                </div>
                <div class="cost" data-bind="formatUSD: itemPrice">$ 0</div>
            </li>
            
            <!-- ko foreach: { data: itemFreebies, beforeRemove: CartPackage.beforeRemove } -->
            <li class="webfont">
                <div class="details">
                    <h5><strong data-bind="text:...

CSS

body {
    font: normal 12px/18px Hevetica, Arial, sans-serif;
    padding: 20px 50px;
}
p { font-weight: normal; }
strong { font-weight: bold; }
ul {
    font: bold 12px/18px Hevetica, Arial, sans-serif;
    list-style: disc;
}
ul li { padding-bottom: 20px; white-space: nowrap; }
ul li ul { list-style: none; }
ul li ul li { padding: 0; }
ul li ul li.webfont { background: rgba(0,255,0,.15); }
ul li ul li > div { display: inline-block; vertical-align: top; }

JavaScript

var CartItems = {
    "cartItems" : [
        {
            "itemName" : "Product 1",
            "itemDesc" : "Product 1 description",
            "itemType" : "subscription",
            "itemPrice" : 299,
            "itemFreebies" : false
        }, {
            "itemName" : "Product 2",
            "itemDesc" : "Product 2 description",
            "itemType" : "desktop",
            "itemPrice" : 4499,
            "itemFreebies" : [{
                "freebieName" : "Product 2 freebie",
                "freebieDesc" : "Product 2 freebie description",
                "freebieOriginalPrice" : 99
            }]
        }, {
            "itemName" : "Product 3",
            "itemDesc" : "Product 3 description",
            "itemType" : "desktop",
            "itemPrice" : 8999,
            "itemFreebies" : [{
                "freebieName" : "Product 3 freebie",
                "freebieDesc" : "Product 3 freebie description",
                "freebieOriginalPrice" : 99
            }]
        }, {
            "itemName" : "Product 4",
            "itemDesc" : "Product 4 description",
            "itemType" : "desktop",
            "itemPrice" : 99,
            "itemFreebies" : [{
                "freebieName" : "Product 4 freebie",
                "freebieDesc" : "Product 4 freebie description",
                "freebieOriginalPrice" : 99
            }]
        }, {
            "itemName" : "Product 5",
            "itemDesc" : "Product 5 description",
            "itemType" : "webfont",
            "itemPrice" : 49,
            "itemFreebies" : false
        }
    ]
};
var DesktopData = [
    { "id": 1, "name": "Cloud Only", "price": 99 },
    { "id": 2, "name": "1 Workstation", "price": 99 },
    { "id": 3, "name": "2 Workstations", "price": 198 },
    { "id": 4, "name": "3 Workstations", "price": 297 },
    { "id": 5, "name": "4 Workstations", "price": 396 },
    { "id": 6, "name": "5 Workstations", "price": 495 },
    { "id": 7, "name": "6 Workstations",...