Product Layout - Copy this React, Tailwind Component to your project

Design a mobile friendly, visually appealing single screen layout using React and Tailwind CSS. At the top of the screen, display the product title and a 'View All' link in the same row, with adequate spacing between them using justify between from Tailwind’s flex utilities. Style the product title with a bold font and a professional color, such as #1f2937 (dark gray), and the 'View All' link with a subtle hover effect using a slightly lighter shade of blue (#2563eb). Below the title row, implement a horizontal scrolling section showcasing small product detail cards. Each card should feature a compact design, including a product image, name, price, and a small description. Use Tailwind’s flex and overflow x scroll utilities to create the horizontal scroll effect, ensuring smooth and seamless scrolling. Style each card with a soft shadow (shadow md), rounded corners (rounded lg), and a light background color (#ffffff). Add subtle padding and spacing (p 4 and m 2) to make the cards visually distinct while maintaining a clean and consistent layout. Ensure the design is fully responsive by using Tailwind’s responsive utilities, adapting the layout to smaller screens for a seamless user experience on mobile devices.