Flutter Box Model Inspector Card with Nested Spacing Layers

WDiv(
  className: 'flex flex-col w-full max-w-sm rounded-3xl bg-white dark:bg-gray-900 p-5 border border-gray-200 dark:border-gray-800',
  children: [
    WDiv(
      className: 'flex flex-row items-center justify-between w-full',
      children: [
        WDiv(
          className: 'flex flex-row items-center',
          children: [
            WDiv(
              className: 'flex flex-row items-center justify-center w-10 h-10 rounded-xl bg-indigo-500 dark:bg-indigo-600',
              child: WIcon(
                Icons.code,
                className: 'text-lg text-white dark:text-white'
              ),
            ),
            WDiv(
              className: 'flex flex-col ml-3',
              children: [
                WText(
                  'ProductTile',
                  className: 'text-base font-bold text-gray-900 dark:text-white'
                ),
                WText(
                  'Container, depth 12',
                  className: 'text-[11px] text-gray-500 dark:text-gray-400'
                ),
              ],
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-row items-center rounded-full bg-indigo-50 dark:bg-indigo-900 px-3 py-1',
          child: WText(
            'SELECTED',
            className: 'text-[9px] font-bold tracking-wide text-indigo-600 dark:text-indigo-300'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full rounded-xl bg-gray-50 dark:bg-gray-800 px-3 py-2 mt-4',
      child: WText(
        'm-4 border-2 p-3 rounded-xl',
        className: 'text-[11px] font-semibold text-indigo-600 dark:text-indigo-400'
      ),
    ),
    WDiv(
      className: 'flex flex-row items-center justify-center w-full mt-4',
      child: WDiv(
        className: 'flex flex-col items-center w-[300px] h-[170px] rounded-xl bg-rose-100 dark:bg-rose-900 pt-1',
        children: [
          WText(
            'm-4',
            className: 'text-[9px] font-bold tracking-wide text-rose-600 dark:text-rose-300'
          ),
          WDiv(
            className: 'flex flex-col items-center w-[248px] h-[128px] rounded-xl bg-amber-200 dark:bg-amber-900 pt-1 mt-1',
            children: [
              WText(
                'border-2',
                className: 'text-[9px] font-bold tracking-wide text-amber-700 dark:text-amber-200'
              ),
              WDiv(
                className: 'flex flex-col items-center w-[204px] h-[86px] rounded-lg bg-emerald-200 dark:bg-emerald-900 pt-1 mt-1',
                children: [
                  WText(
                    'p-3',
                    className: 'text-[9px] font-bold tracking-wide text-emerald-700 dark:text-emerald-200'
                  ),
                  WDiv(
                    className: 'flex flex-row items-center justify-center w-[152px] h-[44px] rounded-md bg-indigo-500 dark:bg-indigo-600 mt-1',
                    child: WText(
                      '296 x 48',
                      className: 'text-[11px] font-bold text-white dark:text-white'
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    ),
    WDiv(
      className: 'flex flex-row items-center justify-between w-full mt-4',
      children: [
        WDiv(
          className: 'flex flex-col items-center w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
          children: [
            WText(
              '328',
              className: 'text-base font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'WIDTH',
              className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-col items-center w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
          children: [
            WText(
              '96',
              className: 'text-base font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'HEIGHT',
              className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
            ),
          ],
        ),
        WDiv(
          className: 'flex flex-col items-center w-[104px] rounded-xl bg-gray-50 dark:bg-gray-800 py-2',
          children: [
            WText(
              '12',
              className: 'text-base font-bold text-gray-900 dark:text-white'
            ),
            WText(
              'DEPTH',
              className: 'text-[9px] font-semibold tracking-wide text-gray-400 dark:text-gray-500'
            ),
          ],
        ),
      ],
    ),
    WDiv(
      className: 'flex flex-row items-center w-full rounded-xl bg-sky-50 dark:bg-sky-900 px-3 py-2 mt-3',
      children: [
        WIcon(
          Icons.info,
          className: 'text-base text-sky-500 dark:text-sky-300'
        ),
        WDiv(
          className: 'ml-2',
          child: WText(
            'p-3 resolves to 12 logical pixels',
            className: 'text-[11px] font-medium text-sky-700 dark:text-sky-200'
          ),
        ),
      ],
    ),
    WDiv(
      className: 'w-full mt-4',
      child: WButton(
        className: 'flex flex-row items-center justify-center w-full rounded-2xl bg-gray-900 dark:bg-white py-3',
        child: WText(
          'Copy className',
          className: 'text-sm font-bold text-white dark:text-gray-900'
        ),
      ),
    ),
  ],
)