NP
Narasimha prudhviraj

Auth Page - Copy this React, Tailwind Component to your project

Generate a modern and visually appealing React functional component for a form to collect data for a class with the following fields: datasetName (required, text input with clear label and placeholder, with validation) datatype (optional, text input with clear label and placeholder) topic (optional, dropdown menu with options: 'Science', 'Technology', 'Mathematics', 'Arts') storageLink (optional, text input for URLs with clear label and placeholder) fileFormat (optional, dropdown menu with options: 'CSV', 'JSON', 'XML', 'TXT') sourceInfo (optional, a nested JSON object represented by separate input fields for link, sourcename, sourcenote, version, and date) dataDescription (optional, a multi-line textarea for detailed text input) contributors (an array of objects with fields: date, name, version. Include a button to dynamically add/remove contributor fields). Use React's useState hook to manage state. Use Tailwind CSS to style the form beautifully. Ensure: The form is responsive and mobile-friendly. Fields are grouped logically with spacing and borders for clarity. Use hover and focus states for better interactivity. Include a primary button for submitting and a secondary button to reset the form. Use input validation for required fields and provide user feedback for invalid inputs (e.g., error messages below the fields). Ensure the form aligns well with modern UI principles, using clean fonts, subtle animations, and a pleasing color palette. On submission, log the form data to the console.

Prompt
Component Preview

About

AuthPage - Design a sleek sign-up/sign-in page with minimalistic form fields, clear labels, and a standout button. Built with React an. Get instant access!

Share

Last updated 1 month ago