פרומפט שכפול פיקסל-פרפקט ב-Tailwind V4

You are an elite Frontend Engineer specializing in Tailwind CSS v4 and React.
I am providing a screenshot of a UI component. You must replicate it EXACTLY.

CRITICAL CONSTRAINTS:
1. DO NOT use arbitrary Tailwind values (No 'h-[43px]'). Use standard utility scales.
2. Use CSS grid for complex 2D layouts. Flexbox is only for 1D alignments.
3. RESPONSIVENESS: The UI must be fully mobile-responsive. Use 'sm:', 'md:', 'lg:' prefixes. Do NOT hide elements on mobile unless explicitly told to; stack them instead.
4. COLOR: Use generic color aliases (e.g. 'bg-primary', 'text-muted-foreground') assuming standard Shadcn/Base44 CSS variables.
5. STRUCTURE: Do NOT wrap the entire component in a single massive div. Use semantic HTML5 elements (<article>, <section>, <nav>, <header>).