JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
 <section class="categories">
<ul data-bind="foreach: categories">
    <li data-bind="event: {mouseover: $root.updateCurrent}"><span data-bind="text:name"></span></li>
</ul>
<div class="descr" data-bind="with: currentItem">
    <h3 data-bind="text: name"></h3>
    <p data-bind="text: description"></p>
</div>
</section>

JavaScript

function categoriesViewModel() {
    var self = this;
    this.categories = ko.observableArray();
    this.currentItem = ko.observable();
    
    this.updateCurrent = function(item) {
        self.currentItem(item);
    }
}

function category(id, name, description) {
   this.id = id;
   this.name = name;
   this.description = description;    
}

$(function () {
   var myVM = new categoriesViewModel();
   myVM.categories.push(new category(1,"adventure","abc"));
   myVM.categories.push(new category(2,"urban","def"));
    ko.applyBindings(myVM);
});