Default Component - Copy this React, Tailwind Component to your project
Create a product offer component in React using Tailwind CSS. It should include the product name, a brief description, the original price (crossed out), the discounted price, a copyable promo code, a star rating (e.g., "4.8/5"), and a "Buy Now" button. Modifications: 4-Column Layout: Column 1: Add an image. Column 2: Include the product name and description. Column 3: Delete the content. Column 4: Display the prices, promo code, rating, and the "Buy Now" button. Column Adjustment: Shift Column 1 and 2 to the right after removing Column 3. Responsiveness: Ensure the layout adapts to various screen sizes (sm, md, lg, xl). Interactivity: The promo code should be copyable to the clipboard, displaying a confirmation message upon copying. Accessibility: Use semantic HTML tags and ARIA attributes for screen reader compatibility. Styling: Add subtle animations (e.g., hover effects) and support for dark mode using Tailwind’s variants. Provide the complete component code.
