Premium Tutorial Platform - Copy this Html, Tailwind Component to your project

Design-a-clean,-modern,-and-premium-tutorial-website-UI-with-a-light-design-theme-and-the-following-features:-Desktop-Layout:-Two-Column-Layout:-Left-Sidebar:-A-scrollable-list-of-posts,-each-grouped-by-section-names.-Add-a-hover-effect-where-the-section-name-changes-color-with-smooth-animation.-The-sidebar-background-should-have-a-soft-gradient-or-a-light-solid-color-(e.g.,-pastel-or-light-gray).-Include-icons-next-to-each-section-name-for-added-clarity.-Right-Content-Area:-A-spacious,-readable-content-section-with-large,-clear-typography.-Add-subtle-hover-effects-to-images-or-text-links-to-make-the-content-more-interactive.-Add-soft-shadow-effects-behind-the-content-cards-for-a-modern-touch.-Use-rounded-corners-for-both-content-and-sidebar-elements-for-a-smooth-and-friendly-look.-Navigation-animation:-Sidebar-menu-links-should-transition-smoothly-(e.g.,-sliding-effect-or-fade)-when-hovered-over.-Mobile-Layout:-Sticky-Bottom-Navigation-Menu:-Use-a-modern,-minimalist-mobile-bottom-menu-with-icons-for-Home,-Tutorials,-Categories,-Favorites,-and-Profile.-Make-sure-each-icon-has-a-glowing-effect-when-hovered-or-clicked.-Apply-subtle-micro-animations-like-bounce,-color-transition,-or-shake-for-interactive-elements.-For-the-mobile-layout,-add-smooth-transitions-when-switching-between-sections-or-opening/closing-the-sidebar.-Color-Palette:-Use-a-light-theme-with-soft-pastel-colors-or-a-light-gradient-(e.g.,-sky-blue-to-white-or-soft-peach-gradient).-Button-hover-effects-should-include-a-subtle-shadow-or-scale-effect-to-make-interactions-more-noticeable.-Text-should-use-dark,-high-contrast-colors-for-readability,-such-as-deep-charcoal,-navy,-or-dark-gray.-Animations-and-Effects:-Micro-interactions:-Use-Tailwind’s-utility-classes-for-smooth-animations.-For-example,-when-hovering-over-sidebar-items,-text-should-gently-grow-(scale-effect)-or-underline-with-a-smooth-transition.-Include-scroll-animations:-Elements-like-the-content-section-or-images-should-fade-in-or-slide-from-the-sides-as-the-user-scrolls.-Add-a-typing-animation-effect-for-headings-or-post-titles-to-give-a-dynamic-feel,-like-a-"typewriter"-effect.-Glow-Effect:-Subtle-glowing-around-certain-UI-elements-like-buttons,-search-bars,-or-icons-when-hovered-or-focused,-providing-a-polished-and-interactive-feel.-Typography:-Use-modern,-stylish-fonts-that-enhance-readability-and-appeal.-Consider-Inter,-Lora,-or-Montserrat-for-titles-and-Roboto-or-Open-Sans-for-body-text.-Use-large-headings-with-bold-and-clean-typography-for-clarity,-and-smaller-text-for-secondary-content-like-post-descriptions-or-side-notes.-Add-a-dynamic-underline-effect-to-headings-or-links-that-glows-subtly-on-hover.-Additional-Features:-Add-a-floating-search-bar-in-the-header-with-a-rounded,-sleek-design.-When-clicked,-the-search-bar-should-expand-and-smoothly-animate-into-focus.-Add-highlighted-categories-or-section-titles-with-animated-backgrounds,-such-as-a-color-pulse-effect-or-background-color-change-when-hovering-over-the-section-titles.-For-every-clickable-element-(button,-link,-card),-ensure-there’s-a-hover-effect-like-scaling-up,-changing-color,-or-soft-shadow.-Card-Hover-Effects:-When-hovering-over-content-cards,-they-should-slightly-elevate-(with-a-shadow)-and-show-a-brief-glow-effect-or-subtle-zoom-effect.-Add-a-dynamic-loading-spinner-or-skeleton-screen-when-loading-content-to-enhance-user-experience.-Extras:-Use-subtle-background-gradients-in-the-body-area,-or-use-soft,-geometric-patterns-for-a-more-sophisticated-look.-Incorporate-rounded-buttons-and-input-fields-with-soft,-animated-focus-effects-when-clicked.-Include-scrollbars-with-custom-colors-and-rounded-edges-for-better-aesthetics-and-modern-appeal.-Make-sure-the-content-area-has-generous-spacing,-with-margins-between-paragraphs-and-cards-to-ensure-the-layout-feels-airy-and-uncluttered.-Responsive-Design:-Ensure-the-layout-is-mobile-friendly-with-smooth-transitions-for-changing-screen-sizes.-The-left-sidebar-can-collapse-into-a-sliding-menu-on-smaller-screens,-and-the-content-area-should-adjust-fluidly.-Additional-Features-to-Attract:-Hover-activated-animations:-For-example,-when-hovering-over-post-titles-in-the-left-sidebar,-make-them-slightly-elevate-and-change-color-with-a-smooth-animation.-Interactive-Feedback:-When-users-interact-with-the-sidebar-or-main-content,-include-animations-like-zoom-effects,-color-transitions,-or-flip-cards-for-added-interactivity.-Glowing-Effects-for-Key-Elements:-Add-a-soft-glowing-outline-on-active-items-like-the-currently-selected-post-in-the-sidebar-or-the-active-navigation-menu-icon