JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<link rel="stylesheet" href="http://localhost:50035/www/css/bootstrap.css">
<link rel="stylesheet" href="http://localhost:50035/www/css/medconcert.css">
<link rel="stylesheet" href="http://localhost:50035/www/css/responsive.css">
<section id="mailbox-head" class="container">
    <header class="row">
        <div class="span1">
            <img src="http://localhost:50035/www/img/transparent_tiny.gif" width="20" height="20" border="1" />
        </div>
        <h2 class="span3 name" data-bind="text: profile.namewithspec"></h2>
    </header>
    <div class="row">
        <div class="filter span8">
            <input type="text" id="nameFilter" data-bind="value: filterby" placeholder="Filter by name" />
        </div>
        <div class="span4 btn-group">
            <a class="btn" href="#">Inbox</a>
        </div>
    </div>
</section>

JavaScript

var mailbox = function () {
    var boxname = ko.observable(),
        profile = new function (ko) {
            var name = ko.observable("Diane Dobbs"),
                specialty = ko.observable("MD"),
                avatar = ko.observable();

            var nameWithSpecialty = ko.computed({
                read: function(){
                    return name() + ", " + specialty();
                }
            });

            return {
                name: name,
                specialty: specialty,
                avatar: avatar,
                namewithspec: nameWithSpecialty
            }
        } (ko),
        filterby = ko.observable(),
        mail = ko.observableArray([
            {
                from: "Dominique Alvarez, MD",
                timeStamp: "9:57 AM",
                hasAttachment: true,
                subject: "Patient safety concerns after hospital discharge...",
                flags: "unread"
            },
            {
                from: "ER Discharge Team",
                timeStamp: "9:04 AM",
                hasAttachment: true,
                subject: "Discharge information for Michael Victor",
                flags: "unread"
            },
            {
                from: "ER Discharge Team",
                timeStamp: "7:45 AM",
                hasAttachment: true,
                subject: "Discharge information for Natasha Watson",
                flags: ""
            },
            {
                from: "Domanique Alvarez, MD",
                timeStamp: "1 day",
                hasAttachment: false,
                subject: "Your prescription is ready for Patient 654200",
                flags: "unread"
            },
            {
                from: "William Walker, MD",
                timeStamp: "1 day",
                hasAttachment: true,
                subject: "Patient safety concerns after hospital discharge...",
                flags: ""
            },
            {
                from: "ER...