You Tube Homepage Layout - Copy this Html, Tailwind Component to your project

Create a webpage layout that replicates the structure and general design of the YouTube homepage, using HTML and TailwindCSS CDN. The following specifications should be followed: Header Section: Include the YouTube logo on the left, with a search bar in the center, and navigation icons on the right (like sign in, notifications, etc.). The header should have a dark background and include the appropriate spacing for each element using TailwindCSS’s flex, justify between, and items center utilities. Use modern icons from Font Awesome or Heroicons for items like the notification bell, user icon, and menu. Sidebar (Left): Include a vertical sidebar that contains icons for different sections (Home, Trending, Subscriptions, Library, etc.). Icons should be taken from a modern library like Heroicons or Font Awesome. The sidebar should have an appropriate width and a fixed layout while the rest of the content scrolls. Use Tailwind’s grid or flexbox for layout. Main Content Area: Display a set of video thumbnails in a grid layout, similar to YouTube’s homepage. Use Tailwind’s grid layout for responsiveness. Each thumbnail should have a title, video creator's name, and view count displayed below the thumbnail image. Use placeholders for thumbnails, and pull random sample text for video titles and creators. Video Thumbnails: Use image URLs from a free image provider like Unsplash for the thumbnails. Make sure the thumbnails are responsive and well styled using object cover and aspect ratio classes. Footer Section: Create a footer that contains links for about, help, terms, privacy, and other legal sections. Ensure that links are styled appropriately using TailwindCSS’s text sm, text gray 600, and hover:text blue 500. Responsive Design: Ensure the layout adapts to different screen sizes. The sidebar should be hidden on mobile, with a hamburger menu appearing instead. Video thumbnails and text should adjust for mobile views. Use Tailwind’s responsive classes like sm:, md:, and lg:. External Assets: Use modern icons from Font Awesome or Heroicons for buttons and navigation links. For images, use placeholder images from Unsplash (e.g., https://source.unsplash.com/). Animation: Add subtle hover animations for video thumbnails (scale effect) using TailwindCSS's transition utilities. Comments: Ensure the HTML code is well structured and comments are added for better readability. Keep the code modular for future customizations