A
Anonymous

Overlay Container - Copy this React, Mui Component to your project

Create a React component using Material UI (MUI) that has the following layout and styling specifications: Layout: The layout should consist of a single rectangular image occupying the full width of the component. A text container should overlay on the right side of the image, covering a portion of it. Text Container Styling: The background color of the text container must be transparent but with a blurred effect (using backdrop filter: blur(5px)). The text color should be black for headings and shades of gray for body text. The container must appear as if floating over the image while maintaining readability. Responsiveness: The layout should adapt to various screen sizes. On smaller screens, the text container should adjust to avoid clipping or appearing cramped. Image Styling: The image should maintain its aspect ratio and cover the full height and width of its container (object fit: cover). Typography: The text content should include: A title (bold black text). Two or more paragraphs with shades of gray. Shadows and Borders: Apply a subtle shadow to the text container for better distinction from the background image. Optional: Add rounded corners to the text container for a polished look.

Prompt
Component Preview

About

OverlayContainer - A responsive React component with a blurred text overlay on a full-width image, featuring black headings, gray body t. Access free code!

Share

Last updated 1 month ago