A
Anonymous

Multi Step Form - Copy this React, Tailwind Component to your project

Design a responsive and mobile friendly UI using React, Tailwind CSS, react icons, and Ant Design that replicates the provided design. Use an Ant Design Modal as the container with a clean, modern style and rounded corners. At the top, add a progress indicator with steps ("Details," "Date and location," "Guests"), styled with Tailwind for alignment and active step highlighting using animations like scale and ease in out transitions. Include sections for selecting "Date," "Frequency," and "Location" with radio buttons and dropdowns styled with Tailwind's utility classes for alignment and spacing. For the "Frequency" section, allow users to input custom values for intervals and occurrences using number input fields styled with rounded corners, hover effects, and smooth transitions. Add an info box to dynamically display generated dates, styled with a subtle background and hover animation. The "Location" section includes radio buttons for "Physical" or "Virtual," and for virtual, display an input field with a "Paste" button. At the bottom, include "Back," "Cancel," and "Next" buttons styled with Tailwind, incorporating hover effects and transitions. Ensure proper spacing, alignment, and responsiveness for a seamless user experience on all devices.

Prompt
Component Preview

About

MultiStepForm - A responsive UI with progress steps, radio buttons, and dropdowns built with React and Tailwind. Includes smooth transi. Copy now for free!

Share

Last updated 1 month ago