Home
Anonymous
Login page with tailwind (SB admin 2)

Login page with tailwind (SB admin 2)

Forked from> @akshay/sb-admin-2-login-page-with-tailwind

This component features a split-screen design with a background image on one side and a registration form on the other.

This tailwind example is contributed by Anonymous, on 30-May-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in

Form Login Form

Author Anonymous

1.8k

Fork Fullscreen

<div class="h-full bg-gray-400 dark:bg-gray-900">
	
	<div class="mx-auto">
		<div class="flex justify-center px-6 py-12">
			
			<div class="w-full xl:w-3/4 lg:w-11/12 flex">
				
				
				
				<div class="w-full lg:w-7/12 bg-white dark:bg-gray-700 p-5 rounded-lg lg:rounded-l-none">
					<h3 class="py-4 text-2xl text-center text-gray-800 dark:text-white">Create an Account!</h3>
					<form class="px-8 pt-6 pb-8 mb-4 bg-white dark:bg-gray-800 rounded">
						
						<div class="mb-4 md:flex md:justify-around">
							<div class="mb-4 md:mr-2 md:mb-0">
								<label class="block mb-2 text-sm font-bold text-gray-700 dark:text-white" for="email">
									Email
								</label>
								<input
									class="w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 dark:text-white border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
									id="email"
									type="email"
									placeholder="Email"
								/>
							</div>
							<div class="md:ml-2">
								<label class="block mb-2 text-sm font-bold text-gray-700 dark:text-white" for="lastName">
                                   UserName
                                </label>
								<input
                                    class="w-full px-3 py-2 text-sm leading-tight text-gray-700 dark:text-white border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    id="UserName"
                                    type="text"
                                    placeholder="UserName"
                                />
							</div>
						</div>
						<div class="mb-4 md:flex md:justify-around">
							<div class="mb-4 md:mr-2 md:mb-0">
								<label class="block mb-2 text-sm font-bold text-gray-700 dark:text-white" for="password">
                                    Password
                                </label>
								<input
                                    class="w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 dark:text-white border border-red-500 rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    id="password"
                                    type="password"
                                    placeholder="******************"
                                />
								<p class="text-xs italic text-red-500">Please choose a password.</p>
							</div>
							<div class="md:ml-2">
								<label class="block mb-2 text-sm font-bold text-gray-700 dark:text-white" for="c_password">
                                    Confirm Password
                                </label>
								<input
                                    class="w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 dark:text-white border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                    id="c_password"
                                    type="password"
                                    placeholder="******************"
                                />
							</div>
						</div>
						<div class="mb-4 lg:ml-5  md:ml-[90px]">
							<label class="block mb-2 text-sm font-bold text-gray-700 dark:text-white" for="JobTitle">
                                Job Title
                            </label>
							<input
                                class="w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 dark:text-white border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                id="JobTitle"
                                type="text"
                                placeholder="Enter your expected Job title"
                            />
						</div>
						<div class="mb-4 lg:ml-5 md:ml-[90px]">
							<label class="block mb-2 text-sm font-bold text-gray-700 dark:text-white" for="JobType">
                                Job Type
                            </label>
							<input
                                class="w-full px-3 py-2 mb-3 text-sm leading-tight text-gray-700 dark:text-white border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                id="JobType"
                                type="text"
                               
                            />
						</div>
						<div class="mb-4 lg:ml-5 md:ml-[90px]">
							<label class="block text-sm font-bold text-gray-700 dark:text-white" for="JobType">
                                Work Authorization
                            </label>
							<label class="mt-5 mb-6 flex content-start"><input type="checkbox" name="H1B" class="mr-2 form-checkbox rounded-none ring-0 focus:border-tan-500 border-tan-300 border-2 w-5 h-5 text-highlight"> 
							   <span class="text-sm font-semibold">H1B sponsorship</span>
							</label>
						</div>
						<div class="mb-6 text-center">
							<button
                                class="w-full px-4 py-2 font-bold text-white bg-blue-500 rounded-full hover:bg-blue-700 dark:bg-blue-700 dark:text-white dark:hover:bg-blue-900 focus:outline-none focus:shadow-outline"
                                type="button"
                            >
                                Register Account
                            </button>
						</div>
						<hr class="mb-6 border-t" />
						<div class="text-center">
							<a class="inline-block text-sm text-blue-500 dark:text-blue-500 align-baseline hover:text-blue-800"
								href="./index.html">
								Already have an account? Login!
							</a>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

Related Examples