JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div class="list-group" data-bind="foreach: items">  
  <a href="#" class="list-group-item" data-bind="css: {active: $parent.selectedItem() == $data}, click: $parent.select.bind($parent)">
    <h4 class="list-group-item-heading" data-bind="text: header"></h4>
      <p class="list-group-item-text" data-bind="text: text"></p>
  </a>
</div>

JavaScript

ko.applyBindings({
    selectedItem: ko.observable(),
    items: ko.observableArray([
        {header: 'header 1', text: "Cras justo odio"},
        {header: 'header 2', text: "Dapibus ac facilisis in"},
        {header: 'header 3', text: "Morbi leo risus"},
        {header: 'header 4', text: "Porta ac consectetur ac"},
        {header: 'header 5', text: "Vestibulum at eros"}
    ]),
    select: function(item){
        this.selectedItem(item);
    }

})