Modern News Website - Copy this Html, Tailwind Component to your project

Create a clean and modern news website design that includes three key sections: Latest News, Must Read, and Related News. The layout should be structured in a way that is easy to navigate and visually appealing. General Layout: The page should have a minimalist and professional design, using a neutral color palette (whites, grays, and light colors) with bold black for headings. The page should be divided into three sections: Latest News (main content), Must Read (important articles), and Related News (suggested articles). These sections should be displayed in columns with good spacing, ensuring the design is responsive and adjusts well to different screen sizes, including mobile, tablet, and desktop views. Section 1: Latest News (Main Section) Position: This section should be the largest and central on the page, taking up the majority of the content area. Design Style: Use a grid layout for multiple news items. Each news item should consist of a featured image, a headline, a publication date, and a brief summary. Content Blocks: Each news block should have a clean card style design with rounded corners and a slight shadow effect. Headline: Large, bold font for the headline. Use a sans serif font. Publication Date: Smaller text in light gray under the headline. Summary: A few lines of summary text beneath the date. Image Placement: Images should be to the left or top of each article card. Use square or slightly rectangular thumbnails, maintaining a consistent size across the grid. Spacing: Ensure each news card has enough space between them to maintain a clean, uncluttered look. Section 2: Must Read (Sidebar Section) Position: Place this section to the right of the "Latest News" section as a sidebar. Design Style: This section should have a distinct, slightly narrower layout but still grab attention. Use a bold heading, such as "Must Read", and highlight critical or trending stories. Article Blocks: Similar to the "Latest News" section, but with smaller thumbnails and more focus on the text. Headlines: Slightly smaller than the main headlines but still prominent. Thumbnail Images: Small, aligned next to the article title (to the left of the title). These should be consistent in size. Highlights: Use a bold or contrasting color to highlight the "Must Read" articles, differentiating them from regular news. Background: Consider a light gray or off white background to visually separate this section from the main news area. Section 3: Related News (Bottom Section) Position: Located below the "Latest News" section. Design Style: This section should appear as a continuation of the main content but focuses on additional, similar articles. Title: Bold heading labeled "Related News" or "You May Also Like". Article Blocks: Use a horizontal card design with images to the left of each related news article, and text (headline and brief summary) aligned on the right. Article Count: Display around 3 5 related articles. Layout Style: These cards should be in a row on wider screens but stack vertically on mobile. The images should be larger here, occupying around 30 40% of the card space. Design Elements: Typography: Headlines in bold, sans serif fonts (e.g., Open Sans, Roboto, or Lato). Smaller text for summaries and dates should be clean and easy to read. Spacing: Use ample white space between sections and articles to avoid visual clutter. Colors: A muted color scheme (light gray, white, black) with occasional use of a single accent color for buttons or important highlights. Buttons and Links: Add a "Read More" button under each article summary, using the accent color. The "Must Read" section can have an eye catching hover effect (e.g., slight zoom or underline) when a user hovers over a headline. Responsiveness: Mobile: On mobile devices, the layout should adapt by stacking the columns vertically. The "Must Read" section should appear after the "Latest News", and the "Related News" section should follow. Tablet: On tablets, allow for a two column layout where "Latest News" occupies a larger portion, and "Must Read" fits into a narrower column beside it. Desktop: On desktop, ensure all three sections are displayed in columns with appropriate spacing. Additional Elements: Header: A sleek, minimalist header with the site logo on the left and a simple navigation bar on the right (Home, Categories, Contact, etc.). Footer: A simple footer with links to social media, terms of service, and contact information.