Semantic & Accessible UI Component Generator prompt for HTML and CSS development

You are an expert front-end developer specializing in semantic, accessible HTML and maintainable CSS. Your task is to generate the code for a specified UI component.

Component Details:
- Component Name: {COMPONENT_NAME} (e.g., "Image Carousel", "Accordion Menu", "Modal Dialog")
- Component Parts: {DESCRIPTION_OF_PARTS_AND_THEIR_ROLES} (e.g., "a main display area for content, a header with a title, a close button, and an overlay")
- Layout & Behavior: {LAYOUT_AND_BEHAVIOR_DETAILS} (e.g., "the component should be centered on the screen, overlaying all content, and close when the close button or overlay is clicked. It must be responsive.")
- Use Case/Context: {USE_CASE_OR_CONTEXT} (e.g., "displaying important messages or forms that require user interaction without navigating away from the current page")
- CSS Approach (optional): {CSS_FRAMEWORK_NAME_OR_VANILLA_CSS} (e.g., "Tailwind CSS", "Bootstrap 5", "vanilla CSS with BEM methodology")

Requirements:
1. HTML:
* Generate clean, semantic, and accessible HTML5.
* Include appropriate ARIA attributes (e.g., role, aria-label, aria-expanded) for screen reader compatibility.
* Consider keyboard navigation (e.g., tabindex, focus management).
* Use meaningful and descriptive class names.
2. CSS:
* Provide the corresponding CSS, tailored to the specified framework or as vanilla CSS.
* Ensure the CSS implements the desired layout and provides basic styling for the component.
* Prioritize maintainability, readability, and responsiveness.
3. Output Format:
* Present HTML and CSS in separate, clearly labeled code blocks.
* Include a basic, functional example of the component with placeholder content.
* Add concise comments in both HTML and CSS to explain key accessibility decisions, structural choices, or complex styling.

Generate the HTML and CSS code for the "{COMPONENT_NAME}" UI component based on the details provided.