Progress Cards
Tailwind CSS progress cards for surveys, membership status, timesheets, traffic insights, segmented indicators, and progress-driven dashboard modules.
A split progress bar sits above stacked breakdown rows with counts carried at the end of each line.
A lead metric, segmented bar, and small delta label are stacked into a compact summary card.
Segmented bars, avatar chips, and summary rows share a single traffic card with a footer link.
Daily rows pair segmented progress dots with a total-hour value and an over-under marker.
Contributor rows, spend totals, and budget markers are stacked into a single cost card.
Ranked rows use horizontal bars, value labels, and right-aligned totals in the same panel.
Profile details, status controls, totals, and segmented outcomes are combined in one survey detail card.
Answer rows reduce the question to labels, counts, and horizontal bars.
Vertical columns sit beside a summary block, so the rating spread stays visible at once.
A segmented bar is paired with legend rows and totals instead of a larger chart.
Several progress groups are stacked in one panel, each split into labeled segments.
Tabs swap the metric group while action links stay pinned in the header.
Each stat tile repeats the same structure: headline number, short label, and compact progress bar.
A long progress bar carries the main target, with current and goal values kept to the side.