A
Anonymous

Sign up Form - Copy this React, Tailwind Component to your project

Create a UI design that consists of the following elements: Background and Layout: Split screen layout: The left half contains an image of a woman with glasses studying, and the right half contains the sign up form. The background on the right side is a solid black color (#000000). The image on the left side is blurred slightly, with a study environment, creating a focused, intellectual atmosphere. Logo: The logo "iQuanta" is positioned at the top of the right section. Font style for the logo is modern and minimalistic, with the "i" and "Quanta" in different colors—"i" in orange and "Quanta" in white, signifying a professional and educational platform. The tagline "Building Learning Networks" appears in smaller, lighter text below the logo. Form Design: The form is centered vertically and horizontally within the right section. The main font is clean and sans serif, offering good readability against the black background. The heading reads "Sign up using your mobile number" in medium sized white text. Below the heading, there is an input field with a gray background (#333333) and rounded corners for entering the mobile number, which includes a country code selector ("+91"). The input text is white, with the placeholder text in light gray for better visibility against the dark background. A red right arrow button is placed next to the input field for OTP submission. Social Login Options: Two alternative sign in options are displayed under the form: "Sign in with Google" button featuring the Google logo. "Sign in with Mail" button showing a mail icon. The buttons are rectangular with a white background and appropriate icons (Google and Mail). The text for the buttons is black, creating a sharp contrast. Footer: A subtle, fine white line separates the form from the footer. The footer text includes a terms and services acknowledgment in small, light gray font, maintaining legibility but minimizing visual distraction. Font and Typography: The fonts used are sans serif, sleek, and modern, suitable for a tech oriented educational platform. Text size varies, with larger font for headings and smaller font for instructions or footers. Color Palette: Primary color: Black (#000000) for the background. Accent color: Red (#FF0000) for the arrow button. Supporting colors: White (#FFFFFF) for text and buttons, and gray tones (#333333 and lighter) for form elements and secondary text.

Prompt
Component Preview

About

SignUpForm - A sleek split-screen design with a mobile number input, social login options, and a modern logo. Built with React and Ta. Copy component code!

Share

Last updated 1 month ago