Create a multi-tab form UI with the following four tabs: 1. Live Projects 2. Internship 3. Research 4. CSR InitiativeUse a modern card-based layout with a clean blue background and white text fields. At the top of each form, add the corresponding tab name (e.g., "Live Projects" or "Internship"). Add a "POST" button at the bottom of every form.Apply a sleek and modern theme similar to the gradient purple-blue header shown in this example: https://v0.dev (reference image: purple-blue gradient with soft card shadows).### Design Instructions:- Tabs should look like the fifth screenshot: white background for the active tab, purple/blue gradient top bar, modern UI.- Use rounded input fields, blue border focus effects, and spacing similar to your sample.---### Fields for each tab:#### 1. Live Projects- Project Title (text input)- Description (multi-line text area)- Eligibility Criteria (text input)- Mode of Work (text input)- Minimum Skills Required (text input)- Stipend (checkbox: Paid, Unpaid)- Contact (text input)---#### 2. Internship- Job Title (text input)- Description (multi-line text area)- Open for (text input)- Stipend (checkbox: Paid, Unpaid)- Minimum Skills Required (text input)- Duration (text input)- Extendable (checkbox: Yes, No)- Full Time Opportunity (text input)- Contact (text input)---#### 3. Research- Job Title (text input)- Description (multi-line text area)- Open for (text input)- Stipend (checkbox: Paid, Unpaid)- Minimum Skills Required (text input)- Duration (text input)- Extendable (checkbox: Yes, No)- Contact (text input)---#### 4. CSR Initiative- Type of initiative (text input)- Project Description (multi-line text area)- Duration (text input)- Mode (checkbox: Online, Offline, Hybrid)- No. of members (text input)- Compensation (if any) (text input)- Location (text input)- Contact (text input)---Use elegant spacing, consistent layout for all tabs, and a prominent POST button below each form.
I'll create a modern multi-tab form UI with a purple-blue gradient header and clean card-based layout, matching the design shown in your reference images.
I've created a modern multi-tab form UI that matches your design requirements:
Key Features:
- Purple-blue gradient header with "Company Information" title
- Four tabs: Live Projects, Internship, Research, and CSR Initiative
- Active tab styling with white background, inactive tabs with transparent overlay
- Clean card-based layout with proper spacing and shadows
- Rounded input fields with blue focus effects
- Responsive design that works on mobile and desktop
- POST buttons at the bottom of each form
Form Fields:
Each tab contains all the specified fields with proper labels, placeholders, and input types:
- Text inputs for single-line fields
- Textareas for descriptions
- Checkboxes for multiple choice options (Paid/Unpaid, Yes/No, Online/Offline/Hybrid)
- Consistent styling across all forms
The design closely matches your reference images with the modern gradient header, clean white form fields, and professional layout that would work well for a company information system.
see you didnt folo properlyi want them in a sinlge colums all the things labes then in fornt o fthat the boxes for asnwer also ui is good just make that cnahgensg and for all the paes add nice text make it perfect intergative readdy apply proper css
Perfect! I've completely redesigned the form with the following improvements:
Key Changes Made:
Layout & Design:
- Single column layout with labels on the left (fixed width) and input fields on the right
- Horizontal form structure for better readability and professional appearance
- Enhanced gradient header with better shadow and styling
- Improved spacing and visual hierarchy
Interactive Content:
- Realistic placeholder text for every field that shows exactly what users should enter
- Contextual examples in placeholders (salary ranges, specific skills, real scenarios)
- Professional descriptions for each tab explaining the purpose
- Enhanced checkbox labels with additional context
User Experience:
- Better focus states with blue ring and border effects
- Smooth transitions and hover effects
- Enhanced buttons with gradient backgrounds and hover animations
- Consistent spacing and alignment throughout all forms
Professional Features:
- Tab-specific headings and descriptions
- Industry-standard placeholder examples
- Proper form validation ready structure
- Responsive design that works on all devices
The form now looks professional, interactive, and ready for real-world use with meaningful placeholder text that guides users on exactly what to enter in each field!
okay pretty beteter see make it on a single card and alignemd it snor perope aligne everything properly and make lalignment proepr then add proepr textin add nicer css make i a we ll deserved ful eady proejct i dont need any mistaked now. and have nicer spacing make it looks coool \