A
Anonymous

Layout - Copy this React, Tailwind Component to your project

Web Layout Request with Left Side Menu I need a simple web page layout with the following structure: Left Side Menu: A vertical navigation menu on the left side of the screen. The menu should include links to different sections of the page or different pages (e.g., "Home", "About", "Contact"). The background of the menu should be a solid color (e.g., #333), with white text. Each menu item should be clickable and change color (e.g., on hover). The menu should be fixed to the left side of the screen, taking up a portion of the screen width (e.g., 250px). Header Section: The header should have a title (e.g., "My Simple Web App") in large font and a description below it (e.g., "Your awesome app description"). Use a background color for the header (e.g., #4CAF50) and white text. Center the text horizontally and vertically within the header. Main Content Section: The main content should be a two column layout: On the left, a text section containing: A heading (e.g., "Welcome to My Web App") in a large font size. A brief description or paragraph. On the right, an image section containing an image fetched from a random image API (e.g., Picsum) with a fixed size of 500x300px. The text and image sections should be horizontally aligned and have a gap between them. Footer Section: The footer should have a dark background (e.g., #333) with white text and be fixed at the bottom of the page. The footer should contain a copyright notice (e.g., "© 2024 My Web App") and be centered horizontally. Styling and Layout: Use Flexbox for aligning the text and image sections in the main content area. The menu should be fixed on the left and should have a scrollable content area if needed. Ensure that the page layout is responsive and adapts well to different screen sizes, particularly for mobile devices. The design should be minimalist, clean, and user friendly, with a simple color scheme.

Prompt
Component Preview

About

Layout - A responsive web layout with a fixed left side menu, header, two-column content, and footer. Built with React and Tailwind. Get component free!

Share

Last updated 1 month ago