The code returns the following error:
Failed to load "https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" from "blob:https://kzmk5fhglysqlyocgzlk.lite.vusercontent.net/cc46a2bb-0b1b-471a-8759-8d4eefbe094b - see network log for details.", make sure it exists.
Revise the code to address the error.
I was previewing: /
I see the issue - the Google Fonts import is failing in the Next.js environment. Let me fix this by removing the external font import and using Tailwind's built-in font system with a font stack that closely resembles Poppins.
I've fixed the font loading issue by:
font-poppins to font-sans in the componentThe page will now use system fonts (like San Francisco on macOS, Segoe UI on Windows, etc.) which provide a clean, modern appearance similar to Poppins without requiring external font loading. This approach is more reliable in the Next.js environment and provides better performance.
The design and functionality remain exactly the same - only the font loading mechanism has been updated to work properly in your environment.
I'll fix the font to use Poppins properly and left-align the input and terms text as requested.
I've updated the code to address your requirements:
Font Changes:
font-poppins class to all text elementsAlignment Changes:
text-left classw-full flex and adding text-leftflex-shrink-0 to the checkbox to prevent it from shrinkingNow all text uses the Poppins font family, and both the input field and terms & conditions text are properly left-aligned while maintaining the overall centered layout of the page.