JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<script src="http://knockoutjs.com/js/knockout-2.2.0.js"></script>
Ticket class:
<select data-bind="options: ticketTypes, optionsCaption: 'Choose...', value: chosenTicket">
</select>

<p data-bind="visible: chosenTicket, css: chosenTicketCss">
    Excellent choice! Suits you perfectly.
</p>

<p><em>Note: Switch to the "HTML", "CSS", or "JavaScript" tabs to see the code.</em></p>

CSS

.Ticket { padding: 1em }
.Gold { background-color: Gold; }
.Silver { background-color: Silver; }
.Cattle { background-color: Brown; color: White; }

JavaScript

function MyViewModel() {
    this.chosenTicket = ko.observable();
    this.ticketTypes = ['Gold', 'Silver', 'Cattle'];

    this.chosenTicketCss = ko.computed(function() {
        // Dynamically generate the CSS class
        return 'Ticket ' + this.chosenTicket();
    }, this);
}
    
ko.applyBindings(new MyViewModel());