A
Anonymous

Sign in Page - Copy this React, Tailwind Component to your project

Create a visually appealing and responsive sign in page for your course generation app using the following design elements. At the top of the page, place the website's logo prominently. Below the logo, include a heading that reads "Sign In to CourseGen AI" and a message stating "Please sign in to your account to get started." Incorporate a "Back" button for easy navigation, styled to blend with the overall theme. Provide two sign in options: a transparent "Sign in with Google" button featuring a Google icon that turns orange with a border on hover, and a "Sign in with Apple" button with an Apple icon followed by text. Place a separator with " OR " between these options. Below the separator, include an input field with the placeholder "Your Email Address" and an orange "Sign In with Email" button. Finally, display a message at the bottom: "We'll email you a code for a password free sign in." Ensure that the entire page is responsive and adapts smoothly to desktop, Mac, tablet, and mobile devices, with all elements scaling and positioning appropriately for different screen sizes.

Prompt
Component Preview

About

SignInPage - Create a responsive sign in page with logo, Google and Apple sign-in options, email input, and easy navigation, built wit. Get instant access!

Share

Last updated 1 month ago