JSFiddle - React, Tailwind, and code Playground

by unklefolk

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.js"></script>
            <div id="contentwrap">
                <div id="eagleMain" >
                    <div class="eagle-num" data-bind="text: num" />
                    <div class="eagle-name" data-bind="text: name" />
                    <div class="eagle-date" data-bind="text: date" />
                    <div class="eagle-current" data-bind="text: current" />
                </div>
                <div id="eagleRightCol" >
                    <div class="eagle-favMemories" data-bind="text: memories" />
                    <div id="eagleProject">
                        <div class="eagle-ProjectName"  data-bind="text: projectName" />
                        <div class="eagle-ProjectDescription" data-bind="text: projectDescription" />
                    </div>
                </div>
            </div>

JavaScript

var eagle = {
    num: ko.observable('2'),
    name: ko.observable("Jon"),
    date: ko.observable("Jan 1, 2011"),
    current: ko.observable("student at UC"),
    memories: ko.observable("camping"),
    projectName: ko.observable("Clothing Drive"),
    projectDescription: ko.observable("lorem ipsum")
};

ko.applyBindings(eagle, document.getElementById("contentwrap"));