Create a 2-panel auth screen: - Left: image or quote - Right: login/signup form Layout: - Mobile: vertical stack, form first - Desktop: flex-row layout Use flex-col-reverse md:flex-row. Make form inputs large enough for thumbs. Use ShadCN...

Build a responsive data table with: - Sortable headers - Dropdown filters - Pagination Use ShadCN table components. On mobile, collapse columns into stacked accordion layout (one row expands to show details). Use overflow-x-auto for mid-sized...

Design a responsive sticky navbar. - Include logo, nav links, CTA - Desktop: full horizontal layout - Mobile: hamburger menu (ShadCN dropdown or popover) Sticky using top-0 z-50. Add scroll effect: navbar shrinks and adds shadow on scroll....

Build a grid of feature cards with: - "Icon" - "Short description" - “Learn More” button triggering modal" Layout: - "Mobile: 1 column" - "Tablet: 2 columns" - "Desktop: 3–4 columns" Use Tailwind grid-cols-1, md:grid-cols-2, lg:grid-cols-4....

Build a 3-tier pricing section (Basic, Pro, Enterprise). Highlight the "Pro" plan as Most Popular. Mobile: stack cards vertically Tablet: 2-column Desktop: 3-column Each card includes plan name, price, feature list, CTA. Use Tailwind’s...

Create a responsive hero section for a marketing page. Include: Heading, subheading, CTA button Image or video beside text Layout: Mobile: stacked layout, center aligned Desktop: text left, image right Follow mobile-first strategy. Use...

esign a fully responsive admin dashboard with key widgets: total revenue, user growth, active sessions, and performance trends. On desktop: 2-column layout with fixed sidebar On mobile/tablet: Sidebar collapses into hamburger menu Header is...