Response Details (ID: 152 - UIGEN-X-32B-0727)

Text Before HTML:

We are creating a clone of the Instagram login page. We'll focus on the login form which includes:
 - A logo (Instagram logo)
 - A form with two input fields: username and password
 - A submit button
 - A "Forgot password?" link
 - A sign up link

 We'll use Tailwind CSS for styling. We'll choose a color scheme that is similar to Instagram's (purple and white) but we can adjust as needed.

 Steps:
 1. Set up the HTML structure with Tailwind CSS via CDN.
 2. Create a centered container for the login form.
 3. Add the Instagram logo (we can use an SVG or an image, but for simplicity, we'll use an SVG from the web or a placeholder).
 4. Create a form with two input fields and a button.
 5. Add the necessary links.

 We'll also add some custom styles to make it look clean and modern.

 Note: We are not using the entire template provided, but we are inspired by its design principles (clean, modern, with good spacing and typography).

 Let's design the login page to be centered and responsive.

 We'll use:
   - A light background (white or off-white)
   - The primary color for the button and links: Instagram uses a gradient (purple to pink) but for simplicity we can use a solid color (like purple) or a gradient.

 Since the prompt says "clone", we'll try to mimic the Instagram login page as closely as possible.

 However, note: Instagram's login page has a specific design. We'll create:

   - A card-like form with rounded corners and a shadow.
   - The input fields have a clean design with a bottom border only? Or a full border? Instagram uses a full border for the inputs.

 Let me check: Instagram login page (as of now) has:
   - A white background.
   - A card with a shadow and rounded corners.
   - Inputs with a bottom border only? Actually, they have a full border but it's very subtle.

 We'll design:

   - The form container: rounded, shadow, padding.
   - Inputs: full border, rounded, with a light border color, and a focus style (border color change and maybe a shadow).
   - Button: gradient from purple to pink (like Instagram) or a solid purple? We'll use a gradient to match.

 We'll use the following colors (from Instagram):
   - Primary gradient: linear-gradient(45deg, #833AB4 0%, #FD1D1D 50%, #FCB045 100%)
   - But for the button, they use a solid purple? Actually, they use a gradient.

 However, for simplicity and to avoid using multiple colors in the button, we can use a solid color that matches the brand.

 Alternatively, we can use the gradient. Let's use a gradient for the button to match.

 We'll also add a "Forgot password?" link and a "Sign up" link.

 We'll structure:

   
     

        

          

            
              
            
          
          

            

              Email address
              
            
            

              Password
              
            
            

              
                Sign in
              
            
          
          

            

               Forgot your password? 
            
          
          

            

              Don't have an account?
               Sign up 
            
          
        
     
   

 However, note: Instagram's login page does not have a "Forgot your password?" link on the same page? Actually, it does.

 But let me check: the official page has:
   - The logo
   - The form with two inputs and a button
   - A "Forgot password?" link below the button
   - A "Sign up" link at the bottom.

 We'll adjust accordingly.

 Also, note: the inputs have a border and a background. We'll set the inputs to have a light gray background and a border.

 We'll also add a placeholder for the inputs.

 Let's code accordingly.

 We'll use the following Tailwind CDN: https://cdn.tailwindcss.com

 We'll also add a custom font? Instagram uses 'Inter' and 'Azeret Mono'. We can use Inter for the body and Azeret Mono for the logo? But for simplicity, we'll use system fonts.

 Alternatively, we can use the same font setup as the template? But the prompt says to be inspired by the template, not to mention it.

 We'll use:

   - For the logo: a bold sans-serif (like the template's display font, but we don't have to use the same)
   - For the rest: a clean sans-serif.

 We'll use:

   

 And set:

   body { font-family: 'Inter', sans-serif; }

 For the logo, we can use the same font? Or we can use a different one? Instagram uses a custom logo. We'll use the Inter for the logo too? Or we can use a bolder weight.

 We'll use:

   .logo { font-weight: 700; }

 But we are using an image for the logo, so we don't need to set font.

 We'll use the image from: https://www.instagram.com/static/images/20181211231416/0451497c16d3.png (the text logo) or the icon.

 Actually, the template used an SVG for the logo. We'll use the same approach.

 We'll use the SVG for the Instagram logo.

 We can get the SVG from: https://www.instagram.com/static/images/20181211231416/0451497c16d3.png? But that's a PNG.

 Alternatively, we can use: https://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Instagram_icon.png/240px-Instagram_icon.png

 But for a vector, we can use: https://www.svgrepo.com/svg/111580/instagram-logo

 We'll use:

   

 But that's the icon. We want the text logo? Actually, the Instagram logo is the icon and the word "Instagram" below? Or just the icon?

 On the login page, they use the icon and the word "Instagram" in a circle? Actually, they use a circle with the icon and then the text "Instagram" next to it? Or just the circle.

 We'll use the circle with the icon.

 We'll use the following SVG (from the official logo):

   

 But that's the old logo. The current logo is more complex.

 Alternatively, we can use the SVG from the official site: https://www.instagram.com/static/images/20181211231416/0451497c16d3.png

 But that's a PNG. We'll use the SVG from: https://www.svgrepo.com/svg/111580/instagram-logo

 We'll use:

   

 But that's the icon. We want the text? Actually, the login page uses the icon and the word "Instagram" below? Or just the icon in a circle? 

 We'll use the circle with the icon as in the template.

 We'll use:

   
     
   

 We'll use the following SVG for the Instagram icon (from the official logo):

   

 But that's the old logo. The new logo is:

   

 Actually, the new logo is the same as the old? I think the new logo is more complex. Let me check: https://www.instagram.com/static/images/20181211231416/0451497c16d3.png

 We'll use the following SVG (from the web):

   

 But that's complex. Alternatively, we can use the simpler circle with the icon.

 We'll use:

   

 But note: the stroke is black? We want it to be purple? We'll set the stroke to currentColor and set the color to purple-600.

 We'll do:

   

 But the circle is filled with currentColor? We want the circle to be white? Then we set:

   

 But then the color of the circle won't change. We want the entire logo to be purple.

 We can set:

   

 And then set the color to purple-600.

 But then the circle will be purple and the inner paths will be purple? That's okay.

 Alternatively, we can set:

   

 And then set the color to purple-600 for the entire SVG.

 But then the inner paths are also currentColor? So they will be purple.

 We'll do:

   

 This way, the circle is white and the inner paths are purple.

 We'll use this.

 Now, let's code the page.

 We'll also add a meta viewport and title.

 We'll use the following structure:

   
   
   
     ... meta, title, tailwind CDN, font link ...
     
   
   
     ... content ...
   
   

 We'll also add a script for form submission? Not required, but we can add a simple alert.

 We'll do:

   

 Let's code accordingly.


# Instagram Login Page Clone

I'll create a clean, modern Instagram login page clone using Tailwind CSS with a focus on the design elements and layout that make Instagram's interface so appealing.

Generated HTML Page:

Text After HTML:

## Key Design Elements

1. **Modern Gradient Design**:
   - Used Instagram's signature purple, red, and yellow gradient for the login button
   - Subtle gradient background for the entire page

2. **Clean Card Layout**:
   - Frosted glass effect with backdrop blur
   - Rounded corners and soft shadows
   - Smooth hover animations

3. **User Experience Enhancements**:
   - Password visibility toggle
   - Form validation
   - Loading state for button
   - Social login options

4. **Responsive Design**:
   - Works on all screen sizes
   - Proper spacing and padding
   - Mobile-friendly layout

5. **Visual Details**:
   - Custom divider with text
   - Social media icons with hover effects
   - Subtle animations and transitions
   - Consistent color scheme

The design maintains Instagram's aesthetic while providing a clean, modern login experience with all the necessary functionality.