JSFiddle - React, Tailwind, and code Playground

HTML

<div class="skill-list-body">
        <div class="inner-skill-list-body">
            <div class="skill-list-publication-title" data-bind="text: publication"></div>
            <div data-bind="foreach: { data: categories, as: 'category' }">            
                <div>
                    <div class="skill-list-category-title" data-bind="text: category.name"></div>
                    <div class="category-container" data-bind="foreach: { data: realms, as: 'realm' } ">
                        <div class="realm-skill-box">
                            <div class="skill-list-realm-heading" data-bind="text: name">
                            </div>
                               <div data-bind="foreach: { data: skills, as: 'skill' }">
                                    <div data-bind="text: skill.name"></div>
                                </div>
                        </div>
                    </div>
                </div>            
            </div>
        </div>
    </div>

JavaScript

var viewModel = {
        publication: 'Medieval Fantasy Skills',
        categories: ko.observableArray([
                {
                name: 'Physical & Social Combat Skills',
                realms: ko.observableArray([
                        {
                            name: 'The Realm of Combat Tactics Skills',
                            skills: ko.observableArray([
                                    { name: 'Craft Profession', id: 0 }
                                ])
                        }
                    ])
                }
            ])
    };

    ko.applyBindings(viewModel);