JSFiddle - React, Tailwind, and code Playground

by cgough

HTML

<script src="https://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div id="dialog1" title="Publish Options">
    <label class="margin-right10">Where</label> <select data-bind="options: AreasAvailable, optionsText: 'name', value: selectedChoice, optionsCaption: 'Choose..'"></select>
</div>
<button class="blue-button" id="opener">?</button>

CSS

.ui-widget-header, .ui-state-default, ui-button {
    background:#00aba9;
    border: 1px solid #00aba9;
    color: #FFFFFF;
    font-family: arial;
}
.ui-dialog-content, .ui-widget-content {
    color: #ADB0BA;
}

.margin-right10 {
    margin-right: 10px;
}

.blue-button {
    background: #92D5F8 !important;
    border: 1px solid #0968ba !important;
    color: #006AB7 !important;
    border-radius: 50%;
}

JavaScript

$(function () {
     $("#dialog1").dialog({
         autoOpen: false,
         width: 420,
         height: 300,
         show: {
             effect: "blind",
             duration: 1000
         },
         hide: {
             effect: "slide",
             duration: 1000
         }
     });
     $("#opener").click(function () {
         $("#dialog1").dialog("open");
     });
 });


 var viewModel = function (data) {
     var self = this;
     self.selectedChoice = ko.observable();
     self.selectedLists = ko.observable();
     self.name = ko.observable("");
     
     self.AreasAvailable = ko.observableArray([
     { name: "Campaign Dashboard"},
     { name: "Team Dashboard"},
     { name: "User Dashboard"     }{
         name: "Campaign Management"
     }]);
     
	self.lists = ko.observableArray([
     new ListsAvailable({
         name: "Campaign Dashboard"
     }),
     new ListsAvailable({
         name: "User Dashboard"
     }),
         
     new ListsAvailable({
         name: "Team Dashboard"
     }),
     new ListsAvailable({
         name: "Campaign Management"
     })]);
 };

 ko.applyBindings(new viewModel());
 0