Exam Platform - Copy this React, Tailwind Component to your project

Header-Section-(Same-as-Homepage)-Logo-(Top-left)-Navigation-Bar-(Sticky-on-top):-Home-Exams-(Active-tab)-Notes-Quizzes-Statistics-Membership/Account-Support/FAQ-Exam-Page-Layout:-1.-Exam-Info-Section:-Title:-"Online-Exam:-[Subject-Name]"-Centered-heading-with-the-subject-name-(e.g.,-"Hindi-Exam"-or-"Math-Exam").-Font:-Large,-bold-font-(e.g.,-Montserrat,-Poppins)-with-a-contrasting-color-(blue-or-green).-Subheading:-"Time-Remaining:-[Countdown-Timer]"-Dynamic-timer-showing-countdown-(e.g.,-"1-hour-34-minutes-remaining").-Display-with-bold-text-and-large-font-size.-Exam-Instructions:-Below-the-title,-a-short-set-of-exam-instructions-(e.g.,-"This-exam-contains-20-multiple-choice-questions.-You-have-2-hours-to-complete-it.-Please-answer-all-questions.")-Display-instructions-in-a-collapsible-section-for-a-clean-layout.-2.-Exam-Questions-Section:-Questions-Navigation-Panel-(Left-Sidebar):-Show-a-list-of-questions-with-small-clickable-circles-(e.g.,-Q1,-Q2,-Q3,-...).-Color-indicators-for-answered-(green),-unanswered-(red),-and-bookmarked-(yellow)-questions.-Option-to-Jump-to-a-specific-question-by-clicking-the-question-number.-Main-Question-Display-Area:-Question-Text:-Large,-readable-font-for-the-question.-Multiple-Choice-Options:-Below-each-question,-provide-radio-buttons-for-answer-choices-(4-options-per-question).-Option-to-add-an-image,-video,-or-audio-for-questions-that-require-media-support.-Option-to-mark-questions-for-review-(e.g.,-a-small-checkbox-to-mark-questions-that-need-to-be-revisited-later).-Question-Navigation-Controls:-Next-Question-Button:-To-move-to-the-next-question.-Displayed-at-the-bottom-of-each-question-panel.-Previous-Question-Button:-To-go-back-to-the-previous-question.-Save-and-Continue-Button:-Save-progress-and-proceed-(to-prevent-accidental-loss-of-answers).-Bookmark:-Option-to-bookmark-a-question-for-review-later.-Displayed-as-a-small-icon-(star-or-flag)-next-to-the-question.-3.-Exam-Timer-Section:-Live-Countdown-Timer:-Display-at-the-top-or-right-side-of-the-page.-Color-coded-Timer:-Green-for-more-than-30-minutes-remaining,-Yellow-for-less-than-30-minutes,-Red-when-under-10-minutes.-Ensure-it’s-highly-visible-for-the-student,-with-an-easy-to-read-font.-4.-Exam-Submission-Section:-Submit-Exam-Button:-A-prominent-"Submit-Exam"-button-should-be-displayed-at-the-bottom-of-the-page.-This-button-should-be-disabled-until-all-questions-are-either-answered-or-marked-for-review.-Include-a-confirmation-prompt-when-students-click-"Submit"-(e.g.,-"Are-you-sure-you-want-to-submit-your-exam?").-Save-&-Exit-Button:-Option-to-save-answers-and-exit-the-exam-for-later-continuation.-Clearly-labeled-to-ensure-students-know-they-can-come-back-to-their-exam-at-a-later-time.-5.-Question-Review-Section:-Review-Your-Answers:-A-section-or-pop-up-window-that-allows-students-to-review-their-answers-before-final-submission.-Display-each-question-with-the-option-to:-Change-answers-if-needed.-Review-time-spent-on-each-question.-Mark-questions-that-need-further-review.-Include-the-total-time-spent-so-far-and-the-remaining-time.-6.-Post-Exam-Feedback-Section-(After-Submission):-Result-Summary-(on-exam-completion):-Message:-"Congratulations,-you’ve-completed-your-exam!"-Exam-Stats:-Display-the-following-summary:-Total-questions-attempted-and-unanswered.-Time-spent-on-the-exam.-Score-(e.g.,-correct-answers/total-questions).-Detailed-breakdown-(e.g.,-questions-answered-correctly-vs.-incorrectly).-Detailed-Report:-Correct-vs.-Incorrect-Breakdown:-For-each-subject-area-or-question-type.-Questions-Reviewed:-Highlight-questions-that-were-marked-for-review-or-skipped.-Option-to-Review-Questions:-Students-can-go-back-and-see-which-questions-were-answered-correctly/incorrectly-with-the-correct-answers-displayed.-This-can-be-displayed-as-a-scrollable-list-where-students-can-see-which-questions-were-incorrect-and-review-their-reasoning.-CTA-Button:-"Retake-Exam"-if-students-want-to-retake-the-exam-or-view-more-practice-exams.-7.-Responsive-Design-Features:-Mobile-Optimized-Layout:-Ensure-the-page-adapts-well-to-smaller-screens,-especially-the-exam-interface.-Navigation-Panel:-On-mobile,-the-question-navigation-panel-should-be-collapsible-and-easily-scrollable.-Timer:-Should-remain-fixed-at-the-top/bottom-of-the-screen-as-the-user-scrolls.-Color-Scheme-&-Typography:-Primary-Colors:-Background:-Light-or-white-background-for-clarity.-Buttons:-CTA-buttons-(e.g.,-"Submit-Exam",-"Save-and-Exit")-should-have-a-contrasting-color-like-bright-blue-or-green-for-visibility.-Active-Question-Indicator:-Green-for-answered,-red-for-unanswered,-yellow-for-bookmarked.-Font-Style:-Main-Text:-Easy-to-read-sans-serif-font-(e.g.,-Open-Sans,-Roboto)-for-question-text.-Headings:-Bold,-larger-font-for-question-titles-(e.g.,-24px-for-question-text,-32px-for-headings).-CTA-Buttons:-Larger,-bold-text-for-buttons-like-“Submit-Exam”-with-a-hover-animation.-Additional-Functionalities:-Audio/Video-Integration:-If-your-exam-has-multimedia-based-questions,-use-a-media-player-embedded-within-the-question.-Progress-Bar:-A-visual-progress-bar-showing-the-number-of-questions-answered-vs.-total-questions.-Auto-Save:-Auto-save-answers-periodically-to-ensure-students-don’t-lose-progress-in-case-of-connection-issues.-Footer-Section-(Optional,-but-for-consistency):-Quick-Links:-Terms-&-Conditions,-Privacy-Policy,-Contact-Support.-Social-Media-Links:-Facebook,-Instagram,-YouTube.-FAQ/Help:-Link-to-the-FAQ-or-exam-support.