JSFiddle - React, Tailwind, and code Playground

HTML

<table id='table'>             
     <tbody data-bind="foreach:BuzzCompaignByInterest">                                 
            <tr>                     
                <td style='padding:5px' data-bind='text:key'></td>                     
                <td style='padding:5px'  data-bind='text:value.id'></td>                     
                <td style='padding:5px'  data-bind='text:value.name'></td>                     
                <td style='padding:5px'  data-bind='text:value.description'></td>                 
            </tr>            
      </tbody>         
</table>

JavaScript

function DashboardViewModel() {             
    var self = this;             
    self.BuzzCompaignByInterest = ko.observableArray([]);               
    self.getJson = function () {                 
        var d1 = new DictionaryItem("key1", new BuzzCompaignModel(1, "Name1", 'Desc1'));  
        var d2 = new DictionaryItem("key2", new BuzzCompaignModel(2, "Name2", 'Desc2'));    
        var d3 = new DictionaryItem("key3", new BuzzCompaignModel(3, "Name3", 'Desc3')); 
        var d4 = new DictionaryItem("key4", new BuzzCompaignModel(4, "Name4", 'Desc4'));     
        var array = [];                 
        array.push(d1);      
        array.push(d2);       
        array.push(d3);       
        array.push(d4);        
                      
        self.BuzzCompaignByInterest(array);          
    };               
    self.getJson();         
}           
function BuzzCompaignModel(id, name, description) {             
    this.id = id;             
    this.name = name;             
    this.description = description;         
}                  
function DictionaryItem(key, value) {             
    this.key = key;             
    this.value = value;         
}          
ko.applyBindings(new DashboardViewModel(), document.getElementById('table'));