Premium Tutorial Platform - Copy this Html, Tailwind Component to your project
Design a stunning, modern, and premium tutorial website UI with the following features: Desktop Layout: A two column layout with a left sidebar and a main content area: Left Sidebar: A scrollable vertical list of posts, grouped by section names with clean typography and hover effects. Right Content Area: A spacious area to display the selected tutorial content with large headings, clean fonts, and proper spacing for readability. Add subtle hover animations to the sidebar items. Use glassmorphism effects for the sidebar background with a translucent frosted glass design. Mobile Layout: A sticky bottom navigation menu with modern icons for Home, Sections, Favorites, and Settings. Ensure the navigation menu has smooth hover and click effects with vibrant color transitions. Color Palette: Use a premium, eye catching color palette with a dark mode base and vibrant accent colors (e.g., neon blue, gradient purple, or coral pink). Include subtle gradients for backgrounds and buttons. Text should use clean, high contrast colors for readability. Animations: Smooth page transitions using TailwindCSS animations (e.g., fade in, slide in for the content area). Add micro interactions for buttons and navigation items, such as bounce or pulse effects on hover. Typography: Use modern, premium fonts for a clean look (e.g., Inter, Poppins, or Open Sans). Ensure heading hierarchy and clear separation of sections for easy readability. Additional Features: Add a search bar at the top of the sidebar with rounded edges and a subtle glow. Use shadow effects and border radius for a premium feel. Responsive and adaptive for all devices with fluid grids. Extras: Include background patterns or shapes (e.g., abstract lines or blobs) to enhance visual interest. Ensure the design is mobile first, fully responsive, and has smooth scrolling. Generate this design in TailwindCSS with appropriate class names, structure, and responsiveness for desktop and mobile views.
