JH
Javed Hussain

Finance Pre Qualification - Copy this React, Tailwind Component to your project

Create a simple web app, the navbar should have a logo "Finance pre qualifiqation" on the left side and user's profile picture on the right side. there should be a background image covering the whole screen ( i.e, 100% height and 100% width of the screen) excluding the navbar, the navbar should have a black background. in the center of the screen there should be a form, the form should have five steps and the form will have a white background. There should be two buttons at the bottom of the form having arrow next and arrow previous icons, the arrow previous will be disabled when it is the first step of the form and the arrow next should be replaced by a submit button when it is the last step of the form. on clicking the next arrow icon it should show the next step having some new fields and on clinking on the previous icon it should show the previous step of the form. at the top of the form there should be a title which will be changed for each step of the form. below the title there should be a progress bar showing the progress of the form filling by users. the progress bar should have five circles connected by lines,each circle will have a number starting from 1 and each circle will have an alphabet below it starting from A. Initially the the background of first circle and the color of alphabet "A" will be red all the other circles and alphabets will be black, on clicking next the line connecting the circle 1 and circle 2, the background of the circle 2 and the alphabet below it should turn into red.

Prompt
Component Preview

About

FinancePreQualification - A 5-step form with progress indicators, dynamic titles, and navigation buttons. Built with React and Tailwin. Get component free!

Share

Last updated 1 month ago