dashboardsIntermediate

Dashboard Three-Pane

Three-pane layout for navigation, content, and detail 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 3-pane dashboard layout with Tailwind: left nav (~20%), middle content (~50%), right detail panel (~30%). Each pane has independent padding and scroll.

Code

html

<!--
  Source: Mark Mead (HyperUI)
  https://github.com/markmead/hyperui/blob/d09f638255d00e91e95f3cabea4f1d385356dd70/public/examples/application/grids/3.html
  License: MIT
  Surfaced via https://vibedex-ryan-staxs-projects-fb4e0931.vercel.app/components/hyperui-dash-grid-3
-->
<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-3 lg:gap-8">
      <div class="h-32 rounded bg-gray-300 lg:col-span-2"></div>
      <div class="h-32 rounded bg-gray-300"></div>
    </div>
  </div>
</div>