Store Page - Copy this React, Tailwind Component to your project

Generating a Store Login Page: Design a user friendly and visually appealing login page for an online store that allows customers to access their accounts seamlessly. The login page should prioritize usability, aesthetics, and accessibility, ensuring that users have a positive experience. Below are detailed specifications for the layout and functionality of the page: Header Section: Store Logo: Position the store logo prominently at the top left corner. It should be clickable and redirect users to the homepage. Navigation Links: Include navigation links such as Home, Shop, About Us, and Contact. These links should be easily identifiable and accessible, providing users with a way to navigate the site without needing to return to the homepage. Login Form: Input Fields: Create a field for the email or username, ensuring that the placeholder text clearly indicates what information is required. Include a password field with a "Show Password" toggle feature to enhance usability. Forgot Password Link: Position a “Forgot Password?” link below the password input. This link should direct users to a password recovery page to help them regain access to their accounts. Remember Me Checkbox: Offer a “Remember Me” checkbox to allow users to stay logged in on their devices, enhancing convenience for frequent shoppers. Call to Action: Login Button: Design a prominent "Login" button that stands out visually, encouraging users to submit their credentials. The button should change color or style on hover to enhance interactivity. Create an Account Option: Below the login button, provide a link to “Create an Account” for new users. This should lead to a registration page where users can sign up easily. Design Elements: Layout: The layout should be clean and organized, with ample whitespace to avoid clutter. Consider using card style design for the login form to make it stand out against the background. Color Scheme: Choose a color scheme that reflects the store’s branding. Use contrasting colors for the login button to ensure it is easily noticeable. Typography: Select readable fonts that align with the store's branding, ensuring that text is legible across all devices. Accessibility Features: Screen Reader Compatibility: Ensure that all form elements have appropriate labels, and use ARIA roles where necessary to enhance screen reader support. Keyboard Navigation: Design the form so that users can navigate through the fields using the keyboard, making it accessible for those who may not use a mouse. Mobile Responsiveness: Implement a responsive design that adjusts seamlessly across various screen sizes, from desktop to mobile. Use CSS media queries to ensure that the layout remains user friendly on all devices. Code Generation Prompt Prompt for Generating HTML/CSS Code: Using the specifications outlined above, generate the HTML and CSS code for the store login page. The code should: HTML Structure: Utilize semantic HTML elements (e.g., <header>, <form>, <input>, <button>, etc.) to create a well structured document. Include necessary attributes for accessibility, such as aria labels for input fields. CSS Styling: Write CSS to achieve a modern and clean aesthetic, focusing on layout, colors, and typography. Include hover effects for buttons and links to improve user interactivity. Responsiveness: Implement CSS media queries to ensure the login page adapts to different devices, maintaining usability on both mobile and desktop platforms. Documentation: Add comments throughout the code to explain the purpose of different sections and styles, aiding future developers in understanding and maintaining the code. This prompt provides a comprehensive framework for creating an effective store login page that is both functional and appealing.