Step Wizard - Copy this React, Tailwind Component to your project
Create a responsive multi step form wizard based on the design shown in the screenshot. The form should include the following features and styling: Header Section: Title: "Sign Up To Financial" Subtitle: "Fill all form fields to go to the next step" Centered alignment with a clean and modern font. Step Indicator: A horizontal step indicator with icons and labels for each step. Steps should include: Step 1: "About" (with a user icon) Step 2: "Account" (with a briefcase icon) Step 3: "Ownership" (with a document icon) Step 4: "Financing" (with a dollar sign icon) Active step should be highlighted with a distinct color (e.g., red) and include a circular background icon. Form Section: Each step should have its own form fields. For this example, use the "About" step as a reference: Personal Information Section: Two input fields in a row for "First Name" and "Last Name". One input field for "Address Location". One input field for "Zip Code". One input field for "Phone Number" with an example format placeholder (e.g., "+1 999 000 9999"). The input fields should have a clean design with clear labels. Include inline validation: If there is an error (e.g., incorrect phone number format), show a red error message below the field with a red warning icon. Navigation Buttons: A "Next Step" button at the bottom right, styled with a gradient background (e.g., orange to red) and white text. The button should have a hover effect (e.g., slight darkening or shadow). Styling: Use a clean, modern design with soft shadows and rounded corners. Apply a gradient background for the form container (e.g., light blue to purple). Ensure the design is responsive and works well on both desktop and mobile devices.
