Feedback modal with Next.js and Tailwind CSS
Build a user feedback modal using Next.js, Tailwind CSS, and Headless UI. Learn how to create interactive, accessible, and visually appealing components.
Collect user feedback with a modal form for your client, Stoneway. The final design even uses a Lottie animation when the form submission is complete.
Your Challenge is to create a modal that collects user feedback for your client, Stoneway. Once the form is submitted, the design includes an animated Lottie illustration for the success page. There's also an alert component that needs to be incorporated to display any error messages from the server.
Your Challenge is complete when:
The website is as close to the original design as possible
The website is responsive and viewable on multiple screen sizes
Elements have the correct state styles (hover, focus, etc.)
Clicking the close button will close the modal
Proper alert messages show for errors
The form will only submit when the required fields are complete
Buttons are disabled before a response returns from the form submission
Challenges include all the assets you would expect from a designer in real-world projects, plus some resources to help you complete the Challenge.