Responsive stats dashboard grid from screenshot description
Views
10.4K
Copies
3.5K
Likes
1.8K
Comments
0
Copy rate
34.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