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

1.-Page-Title-&-Introduction:-Title:-"Subject-Wise-Quizzes:-Test-Your-Knowledge"-Centered-heading,-large-and-bold-font-(e.g.,-Montserrat,-Poppins).-Color:-Use-primary-color-(blue-or-green).-Subtitle:-"Browse-quizzes-by-subject-and-topic.-Test-your-preparation-and-track-your-progress."-Smaller-font-beneath-the-main-title-for-clarity.-Search-Bar:-A-search-bar-at-the-top-for-finding-specific-quizzes-(by-subject,-topic,-difficulty-level).-Include-filter-dropdowns-for-filtering-by-Subject-(e.g.,-Hindi,-English,-Math,-Reasoning,-GK)-and-Topic-(e.g.,-Algebra,-Grammar,-Current-Affairs).-Display-results-dynamically-as-the-user-types-or-applies-filters.-2.-Quiz-Filter-Section-(Sidebar-or-Dropdowns):-Subject-Filter:-Dropdown-for-selecting-the-subject-(e.g.,-Hindi,-English,-Math,-Reasoning,-GK).-Use-multi-select-checkboxes-for-selecting-multiple-subjects-at-once.-Topic-Filter:-Dropdown-or-Accordion-style-list-to-select-a-specific-topic-(e.g.,-Algebra,-History,-General-Knowledge).-Difficulty-Level-Filter:-Dropdown-for-selecting-difficulty-(Easy,-Medium,-Hard).-Sort-By:-Dropdown-to-sort-quizzes-by:-Most-Recent-Popularity-(Most-Taken)-Highest-Rated-3.-Quizzes-Display-Section-(Grid-or-List-View):-Layout:-A-grid-view-for-quizzes-on-the-main-page-(3-4-columns-for-larger-screens,-single-column-on-mobile).-Option-for-students-to-toggle-between-grid-or-list-view.-Each-quiz-card-should-include:-Quiz-Title-(e.g.,-"Math:-Algebra-Quiz-1").-Subject-(e.g.,-"Math").-Topic-(e.g.,-"Algebra").-Difficulty-Level-(e.g.,-"Medium").-Number-of-Questions-(e.g.,-"10-Questions").-Estimated-Time-(e.g.,-"15-minutes").-Start-Button-(Button-labeled-"Start-Quiz").-Example-Quiz-Card-Layout:-less-Copy-code-|-------------------------------------------------------------|-|-[Subject-Icon]-[Quiz-Title:-Algebra-Quiz-1]-|-|-------------------------------------------------------------|-|-Topic:-Algebra-|-Difficulty:-Medium-|-10-Q's-|-|-------------------------------------------------------------|-|-Time:-15-mins-|-[Start-Quiz-Button]-|-|-------------------------------------------------------------|-4.-Quiz-Preview-and-Start-Quiz-Button:-Quiz-Information-Preview:-Clicking-on-a-quiz-card-should-open-a-modal-or-a-detailed-preview-page-for-that-quiz.-Display-detailed-information:-Quiz-Title-Subject-Topic-Total-Number-of-Questions-Estimated-Time-Difficulty-Level-Start-Quiz-Button-(button-appears-when-previewed).-Start-Quiz:-Primary-CTA-button-to-start-the-quiz:-"Start-Quiz"-(Large-and-prominent).-Clicking-"Start-Quiz"-will-take-the-student-to-the-quiz-interface-(next-page-or-a-modal).-5.-Quiz-Progress-&-Timer:-Timer:-Display-the-remaining-time-prominently-at-the-top-of-the-quiz-page-(countdown-timer).-Use-color-coding-(e.g.,-green-for->30-mins,-yellow-for-<30-mins,-red-for-under-5-mins).-Quiz-Progress:-A-progress-bar-showing-the-number-of-questions-completed-(e.g.,-“Question-3/10”).-Alternatively,-a-question-navigation-panel-(sidebar)-where-students-can-jump-to-any-question.-6.-Question-Layout-(In-Quiz-Experience):-MCQ-Question-Format:-Question-Text:-Display-large,-readable-question-text.-Options:-Display-4-answer-choices-as-radio-buttons.-Question-Navigation:-Next:-A-"Next-Question"-button-to-go-to-the-next-question-(with-a-confirmation-prompt-if-a-question-is-unanswered).-Previous:-Button-to-go-back-to-the-previous-question.-Mark-for-Review:-Option-to-mark-a-question-for-later-review-(with-a-special-visual-indicator-for-reviewed-questions).-Skip-Questions:-Ability-to-skip-to-the-next-question-if-unsure.-7.-End-of-Quiz-Page:-Completion-Screen:-Once-the-quiz-is-finished,-show-a-completion-screen-with:-Total-Score:-e.g.,-"You-scored-8/10".-Correct-Answers:-List-of-correct-answers-with-an-explanation-if-possible.-Incorrect-Answers:-List-of-incorrect-answers-with-explanations-or-hints-to-help-the-student-learn.-Review-Quiz:-Allow-students-to-review-questions,-with-the-ability-to-go-back-to-each-question-and-see-their-answer.-Retake-Quiz:-A-prominent-button-to-retake-the-quiz-("Retake-Quiz").-Alternatively,-show-a-list-of-related-quizzes-for-further-practice-(e.g.,-similar-quizzes-in-the-same-subject-or-topic).-Social-Share-Options-(Optional):-Allow-students-to-share-their-results-on-social-media-(e.g.,-"I-scored-9/10-in-Algebra-Quiz-–-Try-it-yourself!").-8.-Leaderboard-(Optional,-for-Competition):-Display-a-quiz-leaderboard-showing-the-top-scores-for-each-quiz.-This-adds-a-competitive-element-to-the-quizzes.-Leaderboard-should-include:-Top-scorers'-names-(or-anonymous-usernames).-Their-scores.-Time-taken-to-complete-the-quiz.-9.-Mobile-First-Design:-Mobile-View:-Ensure-that-quiz-cards,-navigation,-and-content-stack-vertically-for-smaller-screens.-Quiz-cards-should-adjust-to-a-single-column-format.-Progress-bar-and-timer-should-stay-at-the-top,-easily-accessible.-Buttons-should-be-large-and-easily-tappable,-especially-on-the-quiz-page.-Quiz-Experience:-Make-sure-the-question-text-is-large-enough-to-read-on-smaller-devices.-Use-large-radio-buttons-and-clear-"Next"-and-"Submit"-buttons.-Ensure-timers-and-progress-bars-are-visible-without-scrolling.-Color-Scheme-&-Typography:-Primary-Colors:-Background:-Clean,-light-background-for-clarity.-Buttons:-Use-Bright-Colors-(e.g.,-Blue,-Green)-for-action-buttons-like-"Start-Quiz,"-"Next,"-and-"Submit."-Progress-Bar:-Use-Green-for-completed,-Yellow-for-in-progress,-and-Red-for-warning-(time-running-out).-Font-Style:-Quiz-Title:-Bold-and-large-sans-serif-font-(e.g.,-Montserrat,-Poppins).-Question/Answer-Text:-Readable-serif-or-sans-serif-font-(e.g.,-Roboto,-Open-Sans)-with-sufficient-line-spacing.-Button-Text:-Large,-bold,-and-centered-(e.g.,-"Next,"-"Submit").