This is a simple React form application created using React and Tailwind CSS.
![image](https://private-user-images.githubusercontent.com/89827931/272814515-bb15251c-2151-4a0e-8fbe-8909bcabc730.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI1Nzg3OTIsIm5iZiI6MTcyMjU3ODQ5MiwicGF0aCI6Ii84OTgyNzkzMS8yNzI4MTQ1MTUtYmIxNTI1MWMtMjE1MS00YTBlLThmYmUtODkwOWJjYWJjNzMwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODAyVDA2MDEzMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk0ZDc2ZjJhNmUyMDNiYzU2MWYwMWYyMTBiY2VkM2M1MzM4YjFlNDkyMGU5Yzk0OTNkNWI0NzBlNWM3MGM4OTcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.QPs9HiextEiYyExAF2F3jEyamWDKXmHJuq_pARoOWwY)
- Input fields for first name, last name, email, state, city, pin, and notification type.
- Dropdown to select the state.
- Radio buttons to select the notification type.
- Submit button to submit the form.
-
Clone the repository:
git clone https://github.com/your-username/react-form-app.git
-
Navigate to the project directory:
cd reactform
-
Install dependencies:
npm install
-
Initialize Tailwind CSS (if not already initialized):
npx tailwindcss init
-
Build the Tailwind CSS:
npx tailwindcss build -o src/tailwind.css
-
Run the development server:
npm start
-
Open your web browser and go to http://localhost:3000 to use the form.
This project uses Tailwind CSS, a utility-first CSS framework, for styling. Key points about Tailwind CSS integration:
- CSS classes from Tailwind CSS are used to style the form elements.
- The form is enclosed in a container with a
shadow
androunded
styling.
![image](https://private-user-images.githubusercontent.com/89827931/272814679-b0a71342-1420-40ab-8215-ab3d75ed3718.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI1Nzg3OTIsIm5iZiI6MTcyMjU3ODQ5MiwicGF0aCI6Ii84OTgyNzkzMS8yNzI4MTQ2NzktYjBhNzEzNDItMTQyMC00MGFiLTgyMTUtYWIzZDc1ZWQzNzE4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODAyVDA2MDEzMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTFiYWQ0OTgwYTk4MDMwYzVmZTRmZGFmMWQzNDJkY2M5OGVlNGJiNWJkM2QyNWY0ZWIxNGMwNGMxMzM0YjVmYWEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.qEIRHMSS6g3Cl_18vRblYMimtKz1cTNAtEdOzQnbaUM)
After submitting the form, a popup/modal will appear displaying the submitted data.
![image](https://private-user-images.githubusercontent.com/89827931/272814827-893cde34-ad6f-49b1-89dc-16cacba2f139.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjI1Nzg3OTIsIm5iZiI6MTcyMjU3ODQ5MiwicGF0aCI6Ii84OTgyNzkzMS8yNzI4MTQ4MjctODkzY2RlMzQtYWQ2Zi00OWIxLTg5ZGMtMTZjYWNiYTJmMTM5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODAyVDA2MDEzMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWU2Yjk2NTFhMGFhMDQyMjlkODg3OTk1YTMwNjUxYjAzMzVhZWZkZDcxNmI3ZTRhZjAxYjFkMmEwOTdjMmQ0MmQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.lSjME4yDzCT3tLE7xRogj0W8JlhOrLYogubffulOgtE)
This project is licensed under the MIT License - see the LICENSE file for details.