JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
Array
<div class="container" data-bind="foreach: posts">
    <div class="item">
        <span data-bind="text: time"></span>
        -
        <span data-bind="text: title"></span>
    </div>
</div>

CSS

.item{

    display: block; 
    background: #C0C0C0; 
    margin-bottom: 5px;
    width: 200px;
}

.container {
    margin: 20px;
    padding: 5px;
    border: 1px solid black;
    width: 200px;        
}

JavaScript

function GridModel() {
        var self = this;
    
        //Initialize the empty observable array
        self.posts = ko.observableArray();

    }
    
    postmapping = {
          key: function(item) { return ko.utils.unwrapObservable(item.time); }
        };
    //data simulate a JSON response    
    var data = [
            {
            time: "07:00",
            title: "test#1",
            type: "odd"},
        {
            time: "08:00",
            title: "work#2",
            type: "even"},
        {
            time: "09:00",
            title: "task#3",
            type: "odd"},
        {
            time: "10:00",
            title: "sleep#4",
            type: "even" },
        {
            time: "11:00",
            title: "wake#5",
            type: "odd" }
        ];

    //Apply the view model

    var Grid_Model = new GridModel();
    ko.applyBindings(Grid_Model);

    $(document).ready(function(){

        //Your AJAX call goes here
       

    });