dashboardsBeginner

Dashboard Grid Layout

12-column responsive grid for dashboard panels.

Live preview

Claude prompt

Drop this into Claude Code, claude.ai, or your AI tool of choice to regenerate or remix this component from scratch.

Build a dashboard grid layout with Tailwind: a 12-column responsive grid containing panels of different widths (KPI cards, chart placeholders, list panels). Used as the layout shell for analytics dashboards.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/grids/1.html
  License: MIT
  Surfaced via https://vibedex.io/components/hyperui-dash-grid-1
-->
<div class="bg-white text-gray-900 min-h-screen flex items-center justify-center">
  <div class="p-6 w-full">
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-8">
      <div class="h-32 rounded bg-gray-300"></div>
      <div class="h-32 rounded bg-gray-300"></div>
    </div>
  </div>
</div>