Quiz App - Copy this React, Tailwind Component to your project

Build-a-highly-interactive-and-visually-appealing-quiz-app-using-React.js-that-provides-users-with-an-engaging-experience.-The-app-should-include-the-following-features:-1.-User-Interface:-Landing-Page:-A-clean,-modern-interface-with-an-attractive-header-and-a-"Start-Quiz"-button.-Option-for-users-to-choose-quiz-categories-(e.g.,-General-Knowledge,-Movies,-Science).-Dynamic-background-with-animations-or-illustrations-to-enhance-visual-appeal.-Quiz-Screen:-Display-one-question-at-a-time-with-4-multiple-choice-options.-Animated-progress-bar-at-the-top-showing-the-user’s-progress-in-the-quiz-(percentage-of-completion).-Use-subtle-animations-or-transitions-for-a-smooth-experience-(e.g.,-fade-in/out-for-questions-and-answers).-Each-question-should-be-timed-(e.g.,-30-seconds)-with-a-countdown-timer.-Visual-feedback-(animations)-for-correct-(green-checkmark-or-confetti)-and-wrong-answers-(red-X-or-shake-effect).-End-Screen:-Show-the-total-score-after-the-quiz-is-finished.-Animated-"Well-Done"-or-"Try-Again"-message-based-on-score.-Option-to-share-results-on-social-media-and-retake-the-quiz.-Display-the-top-leaderboard-scores-dynamically.-Responsive-Design:-Ensure-the-app-is-fully-responsive,-adjusting-smoothly-across-mobile,-tablet,-and-desktop.-2.-Features-&-Functionalities:-Animated-Feedback:-Use-libraries-like-react-spring-or-anime.js-for-smooth-and-interactive-animations-on-user-actions-(correct/wrong-answers,-loading-screen,-etc.).-Progress-Bar:-Implement-a-visually-appealing-progress-bar-that-indicates-how-far-the-user-has-progressed-in-the-quiz.-The-bar-should-increase-in-real-time-as-the-user-answers-questions.-Timer-for-Each-Question:-Add-a-countdown-timer-that-shows-the-remaining-time-to-answer-a-question.-If-the-timer-expires,-the-app-automatically-proceeds-to-the-next-question.-Leaderboard:-Store-the-top-scores-locally-or-in-a-backend-(using-Firebase,-or-a-simple-API)-and-display-the-leaderboard.-Include-the-user’s-rank-along-with-their-score-and-a-"High-Score"-badge-if-they-achieve-the-highest-score.-User-Personalization-(Optional):-Allow-users-to-log-in-and-track-their-quiz-history.-Users-can-save-their-favorite-categories-or-view-their-quiz-stats.-Question-Randomization:-Randomize-questions-from-a-pool-to-ensure-each-quiz-session-feels-unique.-Category-Filter:-Offer-users-a-chance-to-choose-between-different-categories-or-difficulty-levels.-Sound-and-Visuals:-Add-background-music-or-sound-effects-for-correct/wrong-answers-to-make-the-quiz-more-fun.-Incorporate-engaging-animations-like-confetti,-badges,-or-visual-rewards-when-users-answer-correctly.-3.-Backend-(Optional-but-recommended-for-leaderboard-and-saving-data):-API:-Use-a-simple-Node.js-Express-API-to-fetch-trivia-questions-from-an-external-API-(e.g.,-Open-Trivia-DB)-or-your-own-database.-Store-leaderboard-data-(user-score,-name)-in-a-database-like-MongoDB-or-Firebase.-Real-time-Leaderboard:-Implement-WebSockets-(socket.io)-for-real-time-leaderboard-updates-as-users-take-the-quiz.-User-Authentication-(Optional):-Use-Firebase-Authentication-or-JWT-for-user-login-and-save-their-score-history.-4.-Technologies:-Frontend:-React.js-with-functional-components-and-hooks-(e.g.,-useState,-useEffect).-React-Router-for-navigation-between-the-quiz,-leaderboard,-and-start-screens.-Styled-components-or-CSS-modules-for-styling.-react-spring-or-anime.js-for-animations.-Backend-(if-needed):-Node.js-with-Express.js-for-API-routes-(e.g.,-fetching-questions,-storing-scores).-MongoDB-or-Firebase-for-saving-user-data-and-scores.-socket.io-for-real-time-features-like-live-leaderboard-updates.-5.-Extra-Touches:-Dark-Mode:-Implement-a-toggle-for-users-to-switch-between-dark-mode-and-light-mode-for-better-user-experience.-Accessibility:-Ensure-that-the-app-is-fully-accessible,-including-keyboard-navigation,-screen-reader-support,-and-proper-color-contrast.-Interactive-Animation-&-Transitions:-Add-transitions-between-screens-(e.g.,-smooth-fade-or-slide-effect)-to-create-a-fluid-experience-when-moving-from-the-start-page-to-the-quiz.-User-Flow:-Start-Screen:-User-clicks-“Start-Quiz”-to-begin.-Quiz-Screen:-User-answers-questions,-and-progress-is-tracked.-End-Screen:-User-sees-their-final-score,-the-leaderboard,-and-options-to-share-or-retake-the-quiz.-Leaderboard:-A-dynamic-leaderboard-is-shown-with-top-scores-and-the-user’s-position.