JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<div id="tabs">
    <ul>
    </ul>
</div>

JavaScript

function callback(data){
    //making the tab links and content divs
    $.each(data.cat, function(){
      $('#tabs ul').append('<li><a href="#'+this.id+'">'+this.name+'</a>grid</li>    <div><div id="#'+this.id+'"></div></div>');
  
    });

    $( "#tabs" ).tabs();
}

var data = {
    "cat": [
        {"id": "foo1", "name": "Foo 1"},
        {"id": "foo2", "name": "Foo 2"},
        {"id": "foo3", "name": "Foo 3"}
    ]
};