Question Paper - Copy this React, Tailwind Component to your project

Here-is-a-detailed-prompt-for-designing-a-web-page-to-view-the-question-paper,-keeping-in-mind-a-professional-UI/UX-design-with-a-purple-indigo-color-theme-and-ensuring-full-responsiveness-for-mobile,-tablet,-and-desktop-devices.-React-Icons-will-be-included-for-enhanced-functionality-and-user-interaction.-Prompt:-Design-a-modern,-fully-responsive-web-page-to-display-a-question-paper.-The-design-should-be-professional,-intuitive,-and-visually-appealing,-using-a-purple-indigo-color-theme.-The-layout-must-adapt-seamlessly-across-mobile,-tablet,-and-desktop-devices.-General-Design:-The-page-should-have-a-clean,-minimalist-design-with-well-organized-content.-Use-a-purple-indigo-color-scheme:-Shades-of-purple-and-indigo-should-dominate-the-background,-buttons,-and-accents,-creating-a-visually-cohesive-and-modern-feel.-Use-gradients-where-appropriate-for-depth.-The-page-should-have-smooth-animations-for-transitions-between-sections-(e.g.,-when-a-user-navigates-to-the-next-question).-Typography:-Use-a-modern,-legible-font-(such-as-Roboto,-Poppins,-or-Lato)-with-a-large-font-size-for-headings-and-clear,-readable-font-size-for-body-text.-Ensure-high-contrast-between-text-and-background-for-accessibility.-Layout:-The-page-should-have-a-header-displaying-the-title-of-the-question-paper,-along-with-an-icon-for-the-quiz-type-(e.g.,-React-Icons-like-MdQuiz-or-MdFastForward-for-quizzes-or-fast-quizzes).-Below-the-title,-there-should-be-a-timer-showing-the-remaining-time-for-the-entire-exam-or-each-individual-question-(with-React-Icons-such-as-MdTimer-for-visual-clarity).-The-timer-should-be-large-and-prominent,-indicating-urgency-and-progress.-Display-the-question-number-with-progress-indicators-(e.g.,-"Question-1-of-10")-with-subtle-animations-as-the-user-progresses-through-questions.-Each-question-should-be-presented-with-a-question-text-and,-if-applicable,-an-image-related-to-the-question-(with-React-Icons-for-image-related-content-like-MdImage).-Questions-&-Options:-Each-question-should-have-a-radio-button-styled-in-a-modern-way-(using-react-radio-group-or-similar)-for-the-options.-Use-icons-beside-the-options-(e.g.,-a-checkmark-icon-from-react-icons/md-for-correct-answers-and-a-cross-icon-for-incorrect-answers).-If-the-question-has-an-image,-it-should-be-clearly-displayed-above-or-beside-the-options-in-a-responsive-grid-layout.-Add-hover-effects-on-the-options-to-highlight-them-when-hovered,-ensuring-a-smooth-interaction.-Time-Limit-&-Timer:-Each-question-should-have-its-own-individual-timer-(if-applicable),-with-a-countdown-clock-for-each-question.-The-timer-should-be-clearly-visible-and-positioned-in-the-top-right-corner-of-each-question,-indicating-the-time-left-for-the-user-to-answer-that-question.-Use-a-progress-bar-below-each-question-that-fills-up-as-time-runs-out,-offering-a-visual-cue-to-users.-Buttons-&-Actions:-The-"Next-Question"-and-"Submit-Answer"-buttons-should-be-prominently-placed-at-the-bottom-of-each-question.-These-buttons-should-use-large,-easy-to-click-designs-and-have-hover-effects.-For-the-"Next-Question"-button,-use-the-Arrow-Forward-icon-(MdArrowForward),-and-for-the-"Submit-Answer"-button,-use-Checkmark-icon-(MdCheckCircle)-from-react-icons.-The-buttons-should-be-responsive,-adapting-for-smaller-screens-by-stacking-vertically-for-mobile-views,-while-maintaining-a-horizontal-layout-for-desktop.-The-"Submit-Paper"-button-should-be-highlighted-and-styled-to-stand-out-when-the-user-has-completed-all-questions,-potentially-using-a-gradient-background-that-transitions-from-indigo-to-purple.-User-Feedback-&-Results:-Include-a-confirmation-modal-when-the-user-submits-the-paper.-This-modal-should-have-a-clear-message,-a-checkmark-icon-from-MdCheckCircle-indicating-submission-success,-and-a-button-to-return-to-the-homepage-or-view-results.-The-result-screen-should-show-detailed-statistics-of-the-user’s-performance,-such-as-total-questions,-number-of-correct-answers,-and-time-taken,-with-icons-representing-each-statistic-(MdCheckCircle,-MdError,-MdTimer).-Responsive-Design:-For-mobile-devices,-the-page-should-stack-content-vertically,-ensuring-that-text-is-easy-to-read-and-buttons-are-large-enough-for-touch-interactions.-For-tablet-devices,-ensure-that-content-is-spaced-appropriately,-and-buttons/icons-should-remain-large-enough-for-interaction.-For-desktop-devices,-the-page-should-utilize-more-horizontal-spacing,-displaying-the-questions-and-options-in-a-grid-layout-for-efficient-use-of-screen-real-estate.-Icons-&-Interactivity:-Use-React-Icons-throughout-the-page-to-add-visual-cues-for-user-actions-(e.g.,-MdTimer-for-countdowns,-MdCheckCircle-for-correct-answers,-MdClose-for-incorrect-answers,-etc.).-Add-subtle-animations-or-transitions-on-hover-for-buttons-and-clickable-items-to-provide-feedback-to-the-user.-Additional-Features:-Include-an-in-progress-saving-mechanism-where-user-progress-is-saved-automatically-after-answering-each-question,-allowing-them-to-resume-the-quiz-later.-Implement-an-auto-submit-feature-that-automatically-submits-the-paper-once-the-time-limit-for-the-entire-exam-or-session-expires.-For-accessibility,-provide-keyboard-navigation-support-for-answering-questions-and-navigating-between-them.-This-prompt-outlines-a-highly-interactive,-professional,-and-responsive-web-page-design-that-leverages-the-purple-indigo-color-theme-with-React-Icons-to-enhance-usability-and-aesthetic-appeal.-It-ensures-that-the-layout-adapts-to-all-devices,-offering-a-smooth-user-experience-on-mobile,-tablet,-and-desktop.