vibecodng.com

Free MCP betaIndex and tools live

Measured entry

meraki-team-grid-list

teamminimal-flat

A static team directory section with a heading, intro copy, portrait cards, roles, and social links. It ships as a complete HTML document that loads Tailwind from its CDN, uses remote Unsplash portraits, and embeds the social icons as inline SVG. It has no JavaScript or component-library dependency.

Specimen
Harness screenshot of meraki-team-grid-list at 375 pixels wide
Harness screenshot at 375 pixels wide. No horizontal overflow recorded.
Harness screenshot of meraki-team-grid-list at 768 pixels wide
Harness screenshot at 768 pixels wide. No horizontal overflow recorded.
Harness screenshot of meraki-team-grid-list at 1440 pixels wide
Harness screenshot at 1440 pixels wide. No horizontal overflow recorded.

Measured

Every value below was written by the harness on the run that produced the frames above. None of it is derived from the prose.

Harness measurements recorded for meraki-team-grid-list
BuildOK
MountOK
Console errors0
Uncaught page errors0
Horizontal overflowclean at 375, 768, 1440
Axe critical0
Axe serious0
Axe moderate0
Axe minor0
Gzip marginal21.1 KB (86.5 KB build, 65.4 KB baseline)
Bare modeOK
Provider requiredNO
Demo usednone

Verdict

A dependable static starting point for a conventional team page, with clean responsive behavior and no runtime machinery. Adopt it when Tailwind is already part of the site, but budget time to componentize the repeated cards, replace remote assets, fix placeholder links, and clarify card interaction.

Use it if

  • You need a straightforward team roster that adapts from a single column to a wider card grid.
  • Your site already uses Tailwind utilities and you can replace the sample people, portraits, and profile links.
  • You want hover styling and dark-mode classes without adding runtime logic.

Skip it if

  • Your team data comes from a CMS and you need a reusable mapped component rather than repeated static markup.
  • Your content policy forbids remote portrait hosting or a runtime styling CDN.
  • You need each card itself to navigate or expose actions, since the supplied card only looks clickable and its social links are placeholders.
  • You need meaningful portrait alternative text without revising the supplied image markup.

Install

Installation record for meraki-team-grid-list
Declared dependenciesnone declared
Missing on installnone
Bare installbuilds and mounts without the shadcn-style helpers
Providerno provider required in the harness

In a non-shadcn project, add and configure Tailwind CSS, include the source paths in Tailwind's content scan, and copy the section markup into your page or template. Replace the CDN script for production, provide approved portrait assets, add descriptive image text where appropriate, and wire every social link to a real destination.

Source and credit

This page is a review, not a copy. The component source lives with its author and this site does not republish it. Read the license before you use anything.

Author repository

github.com/merakiui/merakiui
License
MIT
Record published
2026-08-13

Alternatives

Other published entries for the team pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.