# Flutter Income Tax Band Card with Marginal Rate Staircase and Effective Rate

A Flutter income tax card for payroll, budgeting and personal finance apps: UK 2026/27 personal allowance, basic and higher rate bands drawn to scale for a 60,000 pound salary, tax per band and tiles for total, effective rate and marginal rate. Baseline-aligned wind_kit bars.

`WDiv`, `WIcon`, `WText`, `WButton`

```dart
WDiv(
  className: 'w-[340px] rounded-3xl bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-5 flex flex-col shadow-xl',
  children: [
    WDiv(
      className: 'flex flex-row items-center justify-between w-full',
      children: [
        WDiv(
          className: 'flex flex-row items-center gap-3',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center w-10 h-10 rounded-xl bg-indigo-600 dark:bg-indigo-500',
              child: WIcon(
                Icons.account_balance_wallet,
                className: 'text-white text-xl'
              )
            ),
            WDiv(
              className: 'flex flex-col',
              children: [
                WText(
                  'Income Tax',
                  className: 'text-base font-bold text-gray-900 dark:text-white'
                ),
                WText(
                  '£60,000 salary, not Scotland',
                  className: 'text-xs text-gray-500 dark:text-gray-400'
                ),
              ]
            ),
          ]
        ),
        WDiv(
          className: 'rounded-full bg-indigo-50 dark:bg-indigo-900/40 px-3 py-1',
          child: WText(
            '2026/27',
            className: 'text-xs font-bold text-indigo-700 dark:text-indigo-300'
          )
        ),
      ]
    ),
    WDiv(
      className: 'flex flex-col w-full mt-4 rounded-2xl bg-gray-50 dark:bg-gray-800 px-3 pt-3 pb-3',
      children: [
        WText(
          'Tax per band',
          className: 'text-[11px] font-semibold text-gray-500 dark:text-gray-400'
        ),
        WDiv(
          className: 'flex flex-row mt-1',
          children: [
            WText(
              '£0',
              className: 'w-[57px] text-center text-[11px] font-semibold text-gray-700 dark:text-gray-300'
            ),
            WText(
              '£7,540',
              className: 'w-[172px] text-center text-[11px] font-semibold text-gray-700 dark:text-gray-300'
            ),
            WText(
              '£3,892',
              className: 'w-[45px] text-center text-[11px] font-semibold text-gray-700 dark:text-gray-300'
            )
          ]
        ),
        WDiv(
          className: 'flex flex-row items-end h-[132px] mt-1',
          children: [
            WDiv(
              className: 'w-[57px] h-[6px] rounded-t-md bg-gray-300 dark:bg-gray-600'
            ),
            WDiv(
              className: 'flex flex-col items-center w-[172px] h-[64px] rounded-t-md bg-indigo-500 dark:bg-indigo-500 pt-2',
              child: WText(
                '20%',
                className: 'text-xs font-bold text-white'
              )
            ),
            WDiv(
              className: 'flex flex-col items-center w-[45px] h-[128px] rounded-t-md bg-violet-500 dark:bg-violet-500 pt-2',
              child: WText(
                '40%',
                className: 'text-xs font-bold text-white'
              )
            )
          ]
        ),
        WDiv(
          className: 'w-[274px] h-[2px] bg-gray-700 dark:bg-gray-300'
        ),
        WDiv(
          className: 'flex flex-row mt-1',
          children: [
            WText(
              '£0',
              className: 'w-[57px] text-[10px] text-gray-500 dark:text-gray-400'
            ),
            WText(
              '£12,570',
              className: 'w-[172px] text-[10px] text-gray-500 dark:text-gray-400'
            ),
            WText(
              '£50,270',
              className: 'w-[45px] text-[10px] text-gray-500 dark:text-gray-400'
            )
          ]
        ),
      ]
    ),
    WDiv(
      className: 'flex flex-row items-center gap-[11px] mt-3',
      children: [
        WDiv(
          className: 'flex flex-col items-center w-[92px] rounded-xl border border-gray-200 dark:border-gray-700 py-2',
          children: [
            WText(
              '£11,432',
              className: 'text-lg font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'Total tax',
              className: 'text-[10px] text-gray-500 dark:text-gray-400'
            )
          ]
        ),
        WDiv(
          className: 'flex flex-col items-center w-[92px] rounded-xl border border-gray-200 dark:border-gray-700 py-2',
          children: [
            WText(
              '19.1%',
              className: 'text-lg font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'Effective',
              className: 'text-[10px] text-gray-500 dark:text-gray-400'
            )
          ]
        ),
        WDiv(
          className: 'flex flex-col items-center w-[92px] rounded-xl border border-gray-200 dark:border-gray-700 py-2',
          children: [
            WText(
              '40%',
              className: 'text-lg font-bold text-violet-600 dark:text-white'
            ),
            WText(
              'Marginal',
              className: 'text-[10px] text-gray-500 dark:text-gray-400'
            )
          ]
        ),
      ]
    ),
    WText(
      'Only the slice above £50,270 is taxed at 40%.',
      className: 'text-xs text-gray-500 dark:text-gray-400 mt-3'
    ),
    WDiv(
      className: 'w-full mt-4',
      child: WButton(
        className: 'w-full rounded-2xl bg-indigo-600 dark:bg-indigo-500 py-3 flex flex-row items-center justify-center gap-2',
        child: WText(
          'See full breakdown',
          className: 'text-sm font-semibold text-white'
        )
      )
    ),
  ]
)
```