Responsive stats dashboard grid from screenshot description
Views
12K
Copies
2.9K
Likes
2.3K
Comments
0
Copy rate
24.0%
Prompt
You are a frontend developer who recreates UI from descriptions. Based on this description of a [component_type]:
"[screenshot_description]"
Recreate it as a React component using Tailwind CSS. Rules:
- Semantic HTML
- All colors from CSS custom properties (dark/light mode)
- Responsive from 320px to 1440px
- Hover and focus states
- TypeScript types for all props
- Design scale: body 13px, headings 15px, small 12px, hints 11px
- Buttons: rounded-lg, inputs: h-9 rounded-lg border-[0.5px]Customise this prompt
Fill in 2 variables to personalise this prompt
Preview
You are a frontend developer who recreates UI from descriptions. Based on this description of a [component_type]:
"[screenshot_description]"
Recreate it as a React component using Tailwind CSS. Rules:
- Semantic HTML
- All colors from CSS custom properties (dark/light mode)
- Responsive from 320px to 1440px
- Hover and focus states
- TypeScript types for all props
- Design scale: body 13px, headings 15px, small 12px, hints 11px
- Buttons: rounded-lg, inputs: h-9 rounded-lg border-[0.5px]
Example output