School Rules Page - Copy this Html, Tailwind Component to your project

Design-a-visually-captivating-and-functional-webpage-for-Articolo-14,-ensuring-it-aligns-with-the-aesthetic-and-structure-of-the-main-website.-Use-a-bold-and-professional-layout-that-immediately-draws-attention-to-the-content-while-maintaining-clarity-and-accessibility.-Set-the-title-prominently-at-the-top-of-the-page-with-the-heading-"Articolo-14:-Norme-di-Comportamento",-displayed-on-a-gradient-blue-background-that-mirrors-the-design-of-the-main-site.-Introduce-the-article-with-a-concise-paragraph-summarizing-its-purpose,-such-as:-"This-section-outlines-the-behavioral-standards-that-promote-respect,-responsibility,-and-a-positive-learning-environment-within-our-school-community."-Structure-the-page-dynamically,-dividing-the-content-into-clearly-defined-subsections,-each-corresponding-to-a-specific-point-of-Articolo-14.-Ensure-each-subsection-is-visually-distinct-by-using-bold,-dark-blue-headers-followed-by-concise,-well-spaced-text.-For-example,-highlight-the-subsection-"a)-Respect-for-School-Staff"-with-a-bold-heading,-followed-by-the-text-explaining-this-rule.-Add-subtle-icons,-such-as-a-handshake-to-symbolize-respect,-to-visually-reinforce-the-message.-Use-collapsible-sections-or-interactive-tabs-to-keep-the-design-clean-and-user-friendly,-especially-for-users-accessing-the-page-on-mobile-devices.-Incorporate-interactive-elements,-such-as-a-quiz-at-the-bottom-of-the-page-to-test-students'-understanding-of-the-rules.-Add-navigation-buttons-that-allow-users-to-jump-to-specific-sections-of-the-article,-as-well-as-a-clearly-labeled-button-to-return-to-the-main-regulations-page.-Design-the-layout-to-maintain-a-seamless-connection-to-the-rest-of-the-website,-ensuring-users-can-easily-navigate-back-and-forth.-Choose-a-professional-and-modern-color-palette-dominated-by-shades-of-blue,-complemented-by-white-and-light-gray-for-text-and-backgrounds.-Use-clean,-sans-serif-fonts-like-Roboto-or-Open-Sans-to-enhance-readability,-and-differentiate-headings-with-slightly-darker-blue-tones.-Ensure-the-page-is-visually-engaging-by-integrating-images-or-illustrations-where-appropriate,-such-as-students-in-classrooms,-clean-school-environments,-or-symbols-representing-the-rules-outlined-in-the-article.-At-the-bottom-of-the-page,-include-a-footer-that-mirrors-the-style-of-the-main-site.-Provide-essential-contact-information,-such-as-"Liceo-Bonghi-Rosmini,-Viale-Ferrovia,-19,-71036-Lucera-FG,-Italia",-and-social-media-links.-Add-a-copyright-notice-to-maintain-a-professional-appearance.-Ensure-the-page-is-fully-responsive,-adapting-seamlessly-to-all-devices-and-screen-sizes,-with-collapsible-sections-for-smaller-screens-to-optimize-usability.