Tabs(
  [
    Tab([text('Tab 1')]),
    Tab([text('Tab 2')], isActive: true), // Or style: [Tab.active]
    Tab([text('Tab 3')]),
  ],
)

Tabs(
  [
    Tab([text('Tab 1')]),
    Tab([text('Tab 2')], isActive: true),
    Tab([text('Tab 3')]),
  ],
  style: [Tabs.border],
)

Tabs(
  [
    Tab([text('Tab 1')]),
    Tab([text('Tab 2')], isActive: true),
    Tab([text('Tab 3')]),
  ],
  style: [Tabs.lift],
)

Tabs(
  [
    Tab([text('Tab 1')]),
    Tab([text('Tab 2')], isActive: true),
    Tab([text('Tab 3')]),
  ],
  style: [Tabs.box],
)

// name of each tab group should be unique
Tabs(
  [
    Tab(null, tag: 'input', name: 'my_tabs_1', ariaLabel: 'Tab 1'),
    Tab(null, tag: 'input', name: 'my_tabs_1', ariaLabel: 'Tab 2', isChecked: true),
    Tab(null, tag: 'input', name: 'my_tabs_1', ariaLabel: 'Tab 3'),
  ],
  style: [Tabs.box],
)

// Xsmall
Tabs(
  [ /* Tabs */ ],
  style: [Tabs.lift, Tabs.xs],
),
// Small
Tabs(
  [ /* Tabs */ ],
  style: [Tabs.lift, Tabs.sm],
),
// Medium (Default)
Tabs(
  [ /* Tabs */ ],
  style: [Tabs.lift, Tabs.md], // Or just Tabs.lift
),
// Large
Tabs(
  [ /* Tabs */ ],
  style: [Tabs.lift, Tabs.lg],
),
// Xlarge
Tabs(
  [ /* Tabs */ ],
  style: [Tabs.lift, Tabs.xl],
)

Tabs(
  [
    Tab(null, tag: 'input', name: 'my_tabs_2', ariaLabel: 'Tab 1'),
    TabContent([text('Tab content 1')], classes: 'border-base-300 bg-base-100 p-10'),

    Tab(null, tag: 'input', name: 'my_tabs_2', ariaLabel: 'Tab 2', isChecked: true),
    TabContent([text('Tab content 2')], classes: 'border-base-300 bg-base-100 p-10'),

    Tab(null, tag: 'input', name: 'my_tabs_2', ariaLabel: 'Tab 3'),
    TabContent([text('Tab content 3')], classes: 'border-base-300 bg-base-100 p-10'),
  ],
  style: [Tabs.border],
  classes: 'w-full', // Example custom class
)

Tabs(
  [
    Tab(null, tag: 'input', name: 'my_tabs_3', ariaLabel: 'Tab 1'),
    TabContent([text('Tab content 1')], classes: 'bg-base-100 border-base-300 p-6'),

    Tab(null, tag: 'input', name: 'my_tabs_3', ariaLabel: 'Tab 2', isChecked: true),
    TabContent([text('Tab content 2')], classes: 'bg-base-100 border-base-300 p-6'),

    Tab(null, tag: 'input', name: 'my_tabs_3', ariaLabel: 'Tab 3'),
    TabContent([text('Tab content 3')], classes: 'bg-base-100 border-base-300 p-6'),
  ],
  style: [Tabs.lift],
  classes: 'w-full',
)

Tabs(
  [
    label(classes: 'tab', attributes: {'role': 'tab'}, [
      input(type: InputType.radio, name: 'my_tabs_4'),
      _liveIcon(), // Assuming _liveIcon() is a Component
      text(' Live'),
    ]),
    TabContent([text('Tab content 1')], classes: 'bg-base-100 border-base-300 p-6'),

    label(classes: 'tab tab-active', attributes: {'role': 'tab'}, [ // Apply 'tab-active' for active state
      input(type: InputType.radio, name: 'my_tabs_4', attributes: {'checked': 'checked'}),
      _laughIcon(),
      text(' Laugh'),
    ]),
    TabContent([text('Tab content 2')], classes: 'bg-base-100 border-base-300 p-6'),

    label(classes: 'tab', attributes: {'role': 'tab'}, [
      input(type: InputType.radio, name: 'my_tabs_4'),
      _loveIcon(),
      text(' Love'),
    ]),
    TabContent([text('Tab content 3')], classes: 'bg-base-100 border-base-300 p-6'),
  ],
  style: [Tabs.lift],
  classes: 'w-full',
)

Tabs(
  [
    Tab(null, tag: 'input', name: 'my_tabs_5', ariaLabel: 'Tab 1'),
    TabContent([text('Tab content 1')], classes: 'bg-base-100 border-base-300 p-6'),
    Tab(null, tag: 'input', name: 'my_tabs_5', ariaLabel: 'Tab 2', isChecked: true),
    TabContent([text('Tab content 2')], classes: 'bg-base-100 border-base-300 p-6'),
    Tab(null, tag: 'input', name: 'my_tabs_5', ariaLabel: 'Tab 3'),
    TabContent([text('Tab content 3')], classes: 'bg-base-100 border-base-300 p-6'),
  ],
  style: [Tabs.lift, Tabs.bottom],
  classes: 'w-full',
)

Tabs(
  [
    Tab(null, tag: 'input', name: 'my_tabs_6', ariaLabel: 'Tab 1'),
    TabContent([text('Tab content 1')], classes: 'bg-base-100 border-base-300 p-6'),
    Tab(null, tag: 'input', name: 'my_tabs_6', ariaLabel: 'Tab 2', isChecked: true),
    TabContent([text('Tab content 2')], classes: 'bg-base-100 border-base-300 p-6'),
    Tab(null, tag: 'input', name: 'my_tabs_6', ariaLabel: 'Tab 3'),
    TabContent([text('Tab content 3')], classes: 'bg-base-100 border-base-300 p-6'),
  ],
  style: [Tabs.box],
  classes: 'w-full',
)

div(classes: 'overflow-x-auto max-w-60', [
  Tabs(
    [
      Tab(null, tag: 'input', name: 'my_tabs_7', ariaLabel: 'Tab title 1', classes: 'z-10'),
      TabContent([text('Tab content 1')], classes: 'sticky start-0 max-w-60 border-base-300 bg-base-100 p-6'),
      Tab(null, tag: 'input', name: 'my_tabs_7', ariaLabel: 'Tab title 2', isChecked: true, classes: 'z-10'),
      TabContent([text('Tab content 2')], classes: 'sticky start-0 max-w-60 border-base-300 bg-base-100 p-6'),
      // ... more tabs and content
    ],
    style: [Tabs.lift], // Or Tabs.box depending on desired style
    classes: 'min-w-max',
  ),
])

Tabs(
  [
    Tab([text('Tab 1')]),
    Tab(
      [text('Tab 2')],
      isActive: true,
      // Apply CSS variables using the `customStyles` property.
      customStyles: Styles(raw: {
        '--tab-bg': 'orange',
        '--tab-border-color': 'red',
      }),
      // Use `classes` for utility classes like text color.
      classes: 'text-primary-content',
    ),
    Tab([text('Tab 3')]),
  ],
  style: [Tabs.lift],
)