A
Anonymous

Product Creation Page - Copy this React, Tailwind Component to your project

Generate a responsive and user friendly UI for an admin product creation page that utilizes Tailwind CSS for styling. The page should feature a clean and modern design, beginning with a header that displays the title "Create New Product" in a bold font size of 2xl with a margin bottom of 6. The form container should have a white background with medium box shadow, rounded corners, and padding of 6. Include form fields for Product Name, Category, Stress Category, YouTube Title, and YouTube Links, each with appropriate labels, placeholders, rounded borders, padding, and border colors (gray 300) with focus outlines (blue 500). Add a section titled "Product Sizes" in a large bold font, where each product size includes a title (text input), a description (textarea with 3 rows and a placeholder), and a colors section displaying a list of colors (e.g., White, Black, Red, Blue, Green). Each color should feature a label, an image upload area with drag and drop functionality, and the ability to display uploaded images with a delete button for each image. Implement collapsible sections for each product size, toggled by a button that reads "Expand" or "Collapse." Include a full width submit button labeled "Create Product," with a background color of Blue 500, text color of White, rounded corners, and a hover effect that darkens the blue color. Ensure the design is responsive, adapting to different screen sizes using flexbox or grid for layout management. Lastly, prioritize accessibility by incorporating appropriate ARIA roles and labels for screen readers.

Prompt
Component Preview

About

ProductCreationPage - Create a responsive admin product form with fields, collapsible sizes, image uploads, and a submit button, built. View and copy code!

Share

Last updated 1 month ago