Measured entry
meraki-feature-media
A copy-paste HTML feature section with a heading, an external Vimeo embed, and a responsive card grid. It ships as a standalone document styled entirely with Tailwind utility classes, uses inline SVG icons, and has no JavaScript package or provider dependency.



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.
| Build | OK |
|---|---|
| Mount | OK |
| Console errors | 2 |
| Uncaught page errors | 0 |
| Horizontal overflow | clean at 375, 768, 1440 |
| Axe critical | 0 |
| Axe serious | 1 |
| Axe moderate | 0 |
| Axe minor | 0 |
| Gzip marginal | 18.4 KB (83.8 KB build, 65.4 KB baseline) |
| Bare mode | OK |
| Provider required | NO |
| Demo used | none |
What the harness recorded
CONSOLE
Failed to load resource: the server responded with a status of 404 ()
CONSOLE
Refused to display 'https://vimeo.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
BARE BUILD
Failed to load resource: the server responded with a status of 404 ()
Verdict
A useful Tailwind layout skeleton, but not production-ready unchanged. The supplied Vimeo frame is refused by the provider and lacks an accessible name, so replace the media URL and add a descriptive iframe title before shipping.
Use it if
- You need a media-led feature section that can be adapted directly in HTML.
- Your project already uses Tailwind and can replace the sample copy and embedded media URL.
- You want built-in dark theme class variants without adding a component runtime.
Skip it if
- Your content security policy or privacy rules prohibit third-party video frames.
- You need a ready-made React component with props, state, or a design-system API.
- You cannot repair the iframe accessibility label and verify that your chosen video URL permits embedding.
- You need meaningful production copy rather than placeholder feature descriptions.
Install
| Declared dependencies | none declared |
|---|---|
| Missing on install | none |
| Bare install | builds and mounts without the shadcn-style helpers |
| Provider | no provider required in the harness |
Add Tailwind CSS to the project, copy the section markup, and preserve or map its responsive and dark theme utilities. No shadcn packages are required. Supply an embeddable media URL, add a descriptive iframe title, and replace all placeholder text.
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/merakiuiAlternatives
Other published entries for the feature-grid pattern, ordered by what they measured: mounts first, then clean axe scans, then bare-mode passes, then the smaller bundle.
- hyperui-feature-grids-3editorial
- Renders
- YES
- A11y
- 0
- Gzip
- 17.7KB
- Bare
- pass
- Prov
- NO
- hyperui-feature-grids-1editorial
- Renders
- YES
- A11y
- 0
- Gzip
- 17.9KB
- Bare
- pass
- Prov
- NO
- hyperui-feature-grids-4editorial
- Renders
- YES
- A11y
- 0
- Gzip
- 17.9KB
- Bare
- pass
- Prov
- NO
- hyperui-feature-grids-2editorial
- Renders
- YES
- A11y
- 0
- Gzip
- 18.3KB
- Bare
- pass
- Prov
- NO
- meraki-feature-grid-list-with-imageminimal-flat
- Renders
- YES
- A11y
- 0
- Gzip
- 18.5KB
- Bare
- pass
- Prov
- NO
- meraki-feature-simpleminimal-flat
- Renders
- YES
- A11y
- 0
- Gzip
- 20.2KB
- Bare
- pass
- Prov
- NO