A
Anonymous

Edit Author - Copy this React, Tailwind Component to your project

"Create a user interface design for an advanced 'Edit Author' page that includes the following elements: Breadcrumb Navigation: Display a breadcrumb at the top with the structure: Home > Edit Author. Tab Navigation Section: Three tabs at the top of the page, each representing different sections: General Info: The main form for entering author details. Social Icons: A dynamic section for adding social media profiles. Verification: A section to enable or disable the verification badge. General Info Tab: A form with fields for: Display Name: Text input for the author's name. Email: Email input field. Company: Text input for the company name. Bio: A textarea for the author’s bio. Job Title: Text input for the job title. Website Link: URL input field. Social Icons Tab: A dynamic input field that allows the user to: Add social media profiles by entering the social network name and the corresponding URL. Include an 'Add Another' button for adding more social profiles. Verification Tab: A toggle switch for enabling or disabling the verification badge. Include a clear label to indicate whether the verification badge is 'Enabled' or 'Disabled.' Design Considerations: Use a clean, modern design with consistent spacing and intuitive layout. Ensure that the form is responsive and user-friendly, with clear labels and input validation. The breadcrumb and tabs should be easy to navigate, with the active tab highlighted. Include form validation feedback (e.g., error messages) where necessary. Generate this UI in a way that makes it visually appealing, functional, and easy to navigate."

Prompt
Component Preview

About

EditAuthor - Create a user-friendly interface with breadcrumb navigation, tabbed sections for info, social media, and verification, buil. Start coding now!

Share

Last updated 1 month ago