You can use `flex-row` and `flex-wrap`.

import { Dom } from "OneJS/Dom"
import { Tab } from "onejs/comps"
import { h, render } from "preact"
import { Style } from "preact/jsx"
import { Vector2 } from "UnityEngine"
import { useRef } from "preact/hooks"
import { classNames } from "classnames"
import { parseColor as c } from "onejs/utils/color-parser"
import { ScrollViewMode, WheelEvent } from "UnityEngine/UIElements"

interface ExampleTabsProps {
    class?: string
    style?: Style
}

const exampleTabs = [
    { label: "Tab 1", nums: randInts(200) },
    { label: "Tab 2", nums: randInts(200) },
    { label: "Tab 3", nums: randInts(200) },
    { label: "Tab 4", nums: randInts(200) },
    { label: "Tab 5", nums: randInts(200) },
    { label: "Tab 6", nums: randInts(200) },
    { label: "Tab 7", nums: randInts(200) },
    { label: "Tab 8", nums: randInts(200) },
]

const ExampleTabs = ({ class: classProp, style }: ExampleTabsProps) => {
    const refs = Array.from(Array(exampleTabs.length)).map(() => useRef<Dom>())

    function onChange(index: number) {
        log(`Tabs index changed to ${index}`)
    }

    // Fixing the UI Toolkit Scrollview speed bug
    // https://forum.unity.com/threads/listview-mousewheel-scrolling-speed.1167404/#post-8258421
    function onWheel(index: number, evt: WheelEvent) {
        let sv = refs[index].current.ve as any
        let scroller = sv.verticalScroller
        if (scroller.highValue > 0) {
            sv.scrollOffset = new Vector2(0, sv.scrollOffset.y + 1000 * evt.delta.y)
            evt.StopPropagation()
        }
    }

    return <Tab.Group class={`flex-col w-[700px] ${classProp}`} onChange={onChange} style={style}>
        <Tab.List class={`flex-row justify-between rounded-md bg-black/50 p-1 mb-2`}>
            {exampleTabs.map((tab, index) =>
                <Tab name={tab.label} index={index} class={({ selected }) => (classNames(`flex-row rounded-md text-white/80 items-center bold justify-center p-3 transition-[background-color] duration-200`, selected ? `bg-white active-text-color` : `hover:bg-white/10`))} style={{ width: `${98 / exampleTabs.length}%` }}>{tab.label}</Tab>
            )}
        </Tab.List>
        <Tab.Panels>
            {exampleTabs.map((tab, index) =>
                <Tab.Panel class={`bg-white rounded-md p-5 flex-row flex-wrap`}>
                    <scrollview key={`${index}`} class="w-full max-h-[200px]" mode={ScrollViewMode.Vertical}
                        ref={refs[index]} onWheel={(e) => onWheel(index, e)}>
                        <div class="w-full flex-row flex-wrap">
                            {tab.nums.map(num => <div class="m-2 justify-center items-center w-10 h-10 bg-orange-200">{num}</div>)}
                        </div>
                    </scrollview>
                </Tab.Panel>
            )}
        </Tab.Panels>
    </Tab.Group>
}

const App = () => {
    return <gradientrect class="w-full h-full justify-center items-center" colors={[c("#42c873"), c("#06a0bb")]}>
        <ExampleTabs class="mb-4" />
    </gradientrect>
}

render(<App />, document.body)

function randInts(n, min = 0, max = 999) {
    let array: number[] = [];
    for (let i = 0; i < n; i++) {
        array.push(Math.floor(Math.random() * (max - min + 1)) + min);
    }
    return array;
}