I’m trying to use the Tailwind CSS tabs component to render content on my page like they show in their documentation, but the behavior I see when implementing does not match.

In my application, the tabs render as a row (like I want), but the content slots between each tab component, causing the tabs to break up when any but the last is selected. See the images below:

No tabs selected:

Last tab selected:

Middle tab selected (“Tab 3 remains in line with the other two tabs, but is off screen to the right [must scroll to see]):

My component code is below:

<script setup>
import { computed, inject, ref } from 'vue';

import AmortizationTable from './AmortizationTable.vue';
import constants from '../constants/constants';

const props = defineProps(['id', 'title', 'type']);
const emits = defineEmits(['exit-details-panel']);

const budgetPrimitives = inject('budgetPrimitives');
const builders = inject('builders');
const loanPrimitives = inject('loanPrimitives');
const visuals = inject('visuals');

const monthlyBudgets = ref(budgetPrimitives.monthlyBudgets);

const selectedTabIndex = ref(0);

const loan = computed(() => {
  const currentLoanId = loanPrimitives.currentLoanId?.value;
  return props.type === constants.LOAN && currentLoanId
    ? loanPrimitives.getLoan(currentLoanId)
    : loanPrimitives.getLoan(constants.TOTALS);
});

const paymentSummary = computed(() => {
  const currentLoanId = loanPrimitives.currentLoanId?.value;
  return props.type === constants.LOAN && currentLoanId
    ? visuals.paymentSummaries.value[currentLoanId]
    : visuals.paymentSummaries.value.totals;
});

const generateKey = (...args) => args.map((arg) => arg.id || arg).join('');

const emitExit = () => {
  emits('exit-details-panel');
};
</script>

<template>
  <base-modal :id="props.id">
    <template #header>
      <h2>{{ title }}</h2>
    </template>
    <template #body>
      <div role="tablist" class="tabs tabs-bordered w-full">
        <ul class="flex flex-row">
          <li v-for="budget in monthlyBudgets" :key="generateKey(loan, budget)">
            <input
              type="radio"
              name="amortization_tables"
              :id="'tab' + index"
              role="tab"
              class="tab"
              :aria-label="`Tab ${budgetPrimitives.getBudgetIndex(budget.id)}`"
            >
            <div role="tabpanel" class="tab-content p-10">
              <AmortizationTable
                :id="'amortizationTable' + generateKey(loan, budget)"
                :keyPrefix="generateKey(loan, budget)"
                :paymentSummary="paymentSummary[budget.id]"
                :title="
                  builders.buildAmortizationTableTitle(
                    loan,
                    budget,
                    loanPrimitives.getLoanIndex(loan.id)
                  )
                "
              />
            </div>
          </li>
        </ul>
      </div>
    </template>
    <template #actions>
      <base-button :class="['createButton']" @click="emitExit"
        >Close</base-button
      >
    </template>
  </base-modal>
</template>

<style scoped>
  input::after {}
</style>