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

Here’s-a-detailed-prompt-for-designing-the-webpage-to-view-the-question-paper-in-a-professional,-responsive,-and-visually-appealing-manner-using-React,-with-a-purple-and-indigo-theme.-This-prompt-is-aimed-at-an-admin-interface-to-display-the-question-paper-and-its-contents:-Design-Prompt-for-Viewing-Question-Paper-(Admin-Side)-Layout-&-Structure:-Full-width-design-with-a-clean-and-minimal-layout-that-adjusts-fluidly-across-mobile,-tablet,-and-desktop-devices.-The-content-is-divided-into-two-main-sections:-the-Question-Paper-Overview-and-the-Questions-List.-The-left-section-shows-the-general-details-of-the-question-paper,-and-the-right-section-presents-the-individual-questions-and-their-corresponding-options.-Use-TailwindCSS-for-responsiveness,-with-proper-padding,-margins,-and-flexbox/grid-structures-to-ensure-the-layout-adapts-across-all-screen-sizes.-Header:-Display-the-title-of-the-question-paper-in-large,-bold,-and-readable-font.-Use-a-purple-background-with-an-indigo-font-color-for-a-professional-touch.-Display-the-class-year,-start-time,-end-time,-and-paper-key-as-secondary,-smaller-text-beneath-the-title.-Main-Content-Section:-Question-Paper-Information:-Title:-Use-a-prominent-font-size,-centered,-with-a-slight-shadow-for-emphasis.-Class-Year:-Display-next-to-the-title-in-a-subtle,-smaller-font-with-a-slight-contrast-in-color-(lighter-indigo-shade).-Time-Limit:-Indicate-the-total-time-allotted-for-the-question-paper-with-an-indigo-circular-progress-bar-(using-a-React-component)-that-fills-up-based-on-the-remaining-time.-Is-Published:-Display-a-'Published'-or-'Not-Published'-status-badge-using-an-indigo-colored-badge-with-an-icon-(like-a-check-or-x-from-react-icons).-Start-and-End-Time:-Show-a-clock-icon-(using-MdAccessTime-from-react-icons/md)-alongside-the-start-and-end-time-details.-Questions-List:-List-each-question-as-a-card-or-a-list-item-with-a-clean,-bordered-box.-For-each-question:-The-question-text-is-prominently-displayed-with-a-larger-indigo-font-for-easy-reading.-Each-question-will-have-its-associated-options-listed-below-it-in-a-horizontal-row-(for-smaller-screens,-the-options-will-be-stacked-vertically).-For-each-option,-include-a-small,-interactive-toggle-to-mark-which-option-is-correct.-This-toggle-should-use-the-MdCheckBox-or-MdRadioButtonUnchecked-icons-from-react-icons/md.-Display-any-related-images-(if-present)-in-a-small,-neatly-sized-image-container-beneath-the-question-text.-Provide-a-points-label-in-a-small-circle-or-bubble-near-the-bottom-of-each-question,-showing-how-many-points-the-question-is-worth,-in-a-lighter-indigo-shade.-Navigation:-Include-a-simple,-intuitive-navigation-bar-or-buttons-at-the-bottom-for-navigating-between-questions-(e.g.,-Next-Question,-Previous-Question).-Use-react-icons-for-arrow-buttons-(e.g.,-MdArrowForward,-MdArrowBack).-For-easier-management,-display-the-current-question-number-and-total-number-of-questions-at-the-top-or-bottom-(e.g.,-Question-1/10).-Responsive-Design:-For-mobile-devices:-The-layout-will-stack-vertically-with-a-simplified-structure.-The-question-and-options-are-stacked-one-after-the-other,-with-large,-clickable-icons-for-interaction.-The-navigation-buttons-will-be-at-the-bottom-with-clear-touch-targets.-For-tablet-devices:-The-layout-will-adjust-to-two-columns,-with-the-question-and-options-side-by-side.-The-left-column-will-contain-the-question-text,-and-the-right-column-will-hold-the-options.-The-title-and-other-metadata-are-displayed-at-the-top-in-a-clear-and-compact-manner.-For-desktop-devices:-The-design-will-feature-a-full-width-layout-with-more-space-for-content,-a-responsive-grid-for-the-questions,-and-proper-alignment.-The-navigation-bar-can-be-placed-at-the-bottom-with-larger-icons-for-better-accessibility.-Icons:-Use-react-icons-extensively-for-the-navigation,-status-badges,-and-interactive-elements-(e.g.,-MdCheck,-MdOutlineAccessTime,-MdFileDownload-for-downloading-the-question-paper).-Icons-for-correct-answers-should-be-color-coded-with-indigo-or-purple,-while-wrong-answers-could-use-a-more-muted-color,-such-as-gray-or-light-red.-Colors:-The-primary-theme-should-revolve-around-indigo-and-purple-tones.-Use-indigo-for-text,-buttons,-and-hover-effects,-and-purple-for-backgrounds-and-highlights.-For-negative-states,-such-as-an-incorrect-answer,-use-light-red-or-gray-colors-for-contrast.-Interactivity:-Hover-effects:-Buttons,-questions,-and-options-should-have-a-hover-effect-with-a-slight-darkening-of-the-background-color-or-underline-effect-for-better-feedback.-Use-smooth-transitions-and-animations-for-buttons,-hover-states,-and-form-elements.-Accessibility:-Ensure-that-text-size-is-responsive-and-readable-across-all-devices.-Use-good-contrast-to-ensure-readability,-especially-with-indigo/purple-backgrounds-and-white-text.-Focus-on-keyboard-navigability-and-screen-reader-support-for-all-interactive-elements-(e.g.,-question-options,-next/previous-buttons,-status-icons).-Admin-Controls:-Admins-can-easily-toggle-the-publish/unpublish-status-using-a-switch-toggle-or-a-button-that-uses-the-MdToggleOn-or-MdToggleOff-icon.-An-option-to-edit-or-delete-the-question-paper-should-be-available-next-to-the-title,-using-the-MdEdit-and-MdDelete-icons.