Login Forms
- Default login page
- Social media login
- Login form with illustration
- Background image
- Login form with description
The login page can be used to allow users to authenticate inside your application based on a collection of templates from Flowbite and coded with Tailwind CSS.
Default login page
This example includes a form with an email and password input accompanied by the logo and other helper texts and links to other authentication pages.
Default login page
html
<!-- Block start -->
<section class="bg-gray-50 dark:bg-gray-900">
<div
class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0"
>
<a
href="#"
class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white"
>
<img
class="w-8 h-8 mr-2"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg"
alt="logo"
/>
Flowbite
</a>
<div
class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700"
>
<div class="p-6 space-y-4 md:space-y-6 sm:p-8">
<h1
class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white"
>
Sign in to your account
</h1>
<form class="space-y-4 md:space-y-6" action="#">
<div>
<label
for="email"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Your email</label
>
<input
type="email"
name="email"
id="email"
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="name@company.com"
required=""
/>
</div>
<div>
<label
for="password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Password</label
>
<input
type="password"
name="password"
id="password"
placeholder="••••••••"
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required=""
/>
</div>
<div class="flex items-center justify-between">
<div class="flex items-start">
<div class="flex items-center h-5">
<input
id="remember"
aria-describedby="remember"
type="checkbox"
class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
required=""
/>
</div>
<div class="ml-3 text-sm">
<label for="remember" class="text-gray-500 dark:text-gray-300"
>Remember me</label
>
</div>
</div>
<a
href="#"
class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"
>Forgot password?</a
>
</div>
<button
type="submit"
class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Sign in
</button>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">
Don’t have an account yet?
<a
href="#"
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
>Sign up</a
>
</p>
</form>
</div>
</div>
</div>
</section>
<!-- Block end -->Social media login
Use this example to alternatively allow users to authenticate using their social media accounts such as with Google, Apple, GitHub or Twitter.
Social media login
html
<!-- Block start -->
<section class="bg-gray-50 dark:bg-gray-900">
<div
class="max-w-screen-xl px-4 py-8 mx-auto lg:grid lg:gap-20 lg:py-16 lg:grid-cols-12"
>
<div
class="flex-col justify-between hidden col-span-6 mr-auto lg:flex xl:mb-0"
>
<div>
<a
href="#"
class="inline-flex items-center mb-6 text-2xl font-semibold text-gray-900 lg:mb-10 dark:text-white"
>
<img
class="w-8 h-8 mr-2"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg"
alt="logo"
/>
Flowbite
</a>
<div class="flex">
<svg
class="w-5 h-5 mr-2 text-primary-600 shrink-0"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<div>
<h3
class="mb-2 text-xl font-bold leading-none text-gray-900 dark:text-white"
>
Get started quickly
</h3>
<p class="mb-2 font-light text-gray-500 dark:text-gray-400">
Integrate with developer-friendly APIs or choose low-code.
</p>
</div>
</div>
<div class="flex pt-8">
<svg
class="w-5 h-5 mr-2 text-primary-600 shrink-0"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<div>
<h3
class="mb-2 text-xl font-bold leading-none text-gray-900 dark:text-white"
>
Support any business model
</h3>
<p class="mb-2 font-light text-gray-500 dark:text-gray-400">
Host code that you don't want to share with the world in private.
</p>
</div>
</div>
<div class="flex pt-8">
<svg
class="w-5 h-5 mr-2 text-primary-600 shrink-0"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
clip-rule="evenodd"
></path>
</svg>
<div>
<h3
class="mb-2 text-xl font-bold leading-none text-gray-900 dark:text-white"
>
Join millions of businesses
</h3>
<p class="mb-2 font-light text-gray-500 dark:text-gray-400">
Flowbite is trusted by ambitious startups and enterprises of every
size.
</p>
</div>
</div>
</div>
<nav>
<ul class="flex space-x-4">
<li>
<a
href="#"
class="text-sm text-gray-500 hover:underline hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
>About</a
>
</li>
<li>
<a
href="#"
class="text-sm text-gray-500 hover:underline hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
>Term & Conditions</a
>
</li>
<li>
<a
href="#"
class="text-sm text-gray-500 hover:underline hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
>Contact</a
>
</li>
</ul>
</nav>
</div>
<div class="mb-6 text-center lg:hidden">
<a
href="#"
class="inline-flex items-center text-2xl font-semibold text-gray-900 lg:hidden dark:text-white"
>
<img
class="w-8 h-8 mr-2"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg"
alt="logo"
/>
Flowbite
</a>
</div>
<div
class="w-full col-span-6 mx-auto bg-white rounded-lg shadow dark:bg-gray-800 md:mt-0 sm:max-w-lg xl:p-0"
>
<div class="p-6 space-y-4 lg:space-y-6 sm:p-8">
<h1
class="text-xl font-bold leading-tight tracking-tight text-gray-900 sm:text-2xl dark:text-white"
>
Welcome back
</h1>
<div class="items-center space-y-3 sm:space-x-4 sm:space-y-0 sm:flex">
<a
href="#"
class="w-full inline-flex items-center justify-center py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-gray-900 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
class="w-5 h-5 mr-2"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_13183_10121)">
<path
d="M20.3081 10.2303C20.3081 9.55056 20.253 8.86711 20.1354 8.19836H10.7031V12.0492H16.1046C15.8804 13.2911 15.1602 14.3898 14.1057 15.0879V17.5866H17.3282C19.2205 15.8449 20.3081 13.2728 20.3081 10.2303Z"
fill="#3F83F8"
/>
<path
d="M10.7019 20.0006C13.3989 20.0006 15.6734 19.1151 17.3306 17.5865L14.1081 15.0879C13.2115 15.6979 12.0541 16.0433 10.7056 16.0433C8.09669 16.0433 5.88468 14.2832 5.091 11.9169H1.76562V14.4927C3.46322 17.8695 6.92087 20.0006 10.7019 20.0006V20.0006Z"
fill="#34A853"
/>
<path
d="M5.08857 11.9169C4.66969 10.6749 4.66969 9.33008 5.08857 8.08811V5.51233H1.76688C0.348541 8.33798 0.348541 11.667 1.76688 14.4927L5.08857 11.9169V11.9169Z"
fill="#FBBC04"
/>
<path
d="M10.7019 3.95805C12.1276 3.936 13.5055 4.47247 14.538 5.45722L17.393 2.60218C15.5852 0.904587 13.1858 -0.0287217 10.7019 0.000673888C6.92087 0.000673888 3.46322 2.13185 1.76562 5.51234L5.08732 8.08813C5.87733 5.71811 8.09302 3.95805 10.7019 3.95805V3.95805Z"
fill="#EA4335"
/>
</g>
<defs>
<clipPath id="clip0_13183_10121">
<rect
width="20"
height="20"
fill="white"
transform="translate(0.5)"
/>
</clipPath>
</defs>
</svg>
Log in with Google
</a>
<a
href="#"
class="w-full inline-flex items-center justify-center py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-gray-900 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
class="w-5 h-5 mr-2 text-gray-900 dark:text-white"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_13183_29163)">
<path
d="M18.6574 15.5863C18.3549 16.2851 17.9969 16.9283 17.5821 17.5196C17.0167 18.3257 16.5537 18.8838 16.1969 19.1936C15.6439 19.7022 15.0513 19.9627 14.4168 19.9775C13.9612 19.9775 13.4119 19.8479 12.7724 19.585C12.1308 19.3232 11.5412 19.1936 11.0021 19.1936C10.4366 19.1936 9.83024 19.3232 9.18162 19.585C8.53201 19.8479 8.00869 19.985 7.60858 19.9985C7.00008 20.0245 6.39356 19.7566 5.78814 19.1936C5.40174 18.8566 4.91842 18.2788 4.33942 17.4603C3.71821 16.5863 3.20749 15.5727 2.80738 14.4172C2.37887 13.1691 2.16406 11.9605 2.16406 10.7904C2.16406 9.45009 2.45368 8.29407 3.03379 7.32534C3.4897 6.54721 4.09622 5.9334 4.85533 5.4828C5.61445 5.03219 6.43467 4.80257 7.31797 4.78788C7.80129 4.78788 8.4351 4.93738 9.22273 5.2312C10.0081 5.52601 10.5124 5.67551 10.7335 5.67551C10.8988 5.67551 11.4591 5.5007 12.4088 5.15219C13.3069 4.82899 14.0649 4.69517 14.6859 4.74788C16.3685 4.88368 17.6327 5.54699 18.4734 6.74202C16.9685 7.65384 16.2241 8.93097 16.2389 10.5693C16.2525 11.8454 16.7154 12.9074 17.6253 13.7506C18.0376 14.1419 18.4981 14.4444 19.0104 14.6592C18.8993 14.9814 18.7821 15.29 18.6574 15.5863V15.5863ZM14.7982 0.400358C14.7982 1.40059 14.4328 2.3345 13.7044 3.19892C12.8254 4.22654 11.7623 4.82035 10.6093 4.72665C10.5947 4.60665 10.5861 4.48036 10.5861 4.34765C10.5861 3.38743 11.0041 2.3598 11.7465 1.51958C12.1171 1.09416 12.5884 0.740434 13.16 0.458257C13.7304 0.18029 14.2698 0.0265683 14.7772 0.000244141C14.7921 0.133959 14.7982 0.267682 14.7982 0.400345V0.400358Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_13183_29163">
<rect
width="20"
height="20"
fill="white"
transform="translate(0.5)"
/>
</clipPath>
</defs>
</svg>
Log in with Apple
</a>
</div>
<div class="flex items-center">
<div class="w-full h-0.5 bg-gray-200 dark:bg-gray-700"></div>
<div class="px-5 text-center text-gray-500 dark:text-gray-400">
or
</div>
<div class="w-full h-0.5 bg-gray-200 dark:bg-gray-700"></div>
</div>
<form class="space-y-4 lg:space-y-6" action="#">
<div>
<label
for="email"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Email</label
>
<input
type="email"
name="email"
id="email"
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="Enter your email"
required=""
/>
</div>
<div>
<label
for="password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Password</label
>
<input
type="password"
name="password"
id="password"
placeholder="••••••••"
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required=""
/>
</div>
<div class="flex items-center justify-between">
<div class="flex items-start">
<div class="flex items-center h-5">
<input
id="remember"
aria-describedby="remember"
type="checkbox"
class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
required=""
/>
</div>
<div class="ml-3 text-sm">
<label for="remember" class="text-gray-500 dark:text-gray-300"
>Remember me</label
>
</div>
</div>
<a
href="#"
class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"
>Forgot password?</a
>
</div>
<button
type="submit"
class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Sign in to your account
</button>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">
Don’t have an account yet?
<a
href="#"
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
>Sign up here</a
>
</p>
</form>
</div>
</div>
</div>
</section>
<!-- Block end -->Login form with illustration
Use this example to complement the login form with a visually impactful 3D illustration.
Login form with illustration
html
<!-- Block start -->
<section class="bg-gray-50 dark:bg-gray-900">
<div
class="grid max-w-screen-xl px-4 py-8 mx-auto lg:gap-20 lg:py-16 lg:grid-cols-12"
>
<div class="w-full place-self-center lg:col-span-6">
<div
class="p-6 mx-auto bg-white rounded-lg shadow dark:bg-gray-800 sm:max-w-xl sm:p-8"
>
<a
href="#"
class="inline-flex items-center mb-4 text-xl font-semibold text-gray-900 dark:text-white"
>
<img
class="w-8 h-8 mr-2"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg"
alt="logo"
/>
Flowbite
</a>
<h1
class="mb-2 text-2xl font-bold leading-tight tracking-tight text-gray-900 dark:text-white"
>
Welcome back
</h1>
<p class="text-sm font-light text-gray-500 dark:text-gray-300">
Start your website in seconds. Don’t have an account?
<a
href="#"
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
>Sign up</a
>.
</p>
<form class="mt-4 space-y-6 sm:mt-6" action="#">
<div class="grid gap-6 sm:grid-cols-2">
<div>
<label
for="email"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Email</label
>
<input
type="email"
name="email"
id="email"
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="name@company.com"
required=""
/>
</div>
<div>
<label
for="password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Password</label
>
<input
type="password"
name="password"
id="password"
placeholder="••••••••"
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
required=""
/>
</div>
</div>
<div class="flex items-center">
<div class="w-full h-0.5 bg-gray-200 dark:bg-gray-700"></div>
<div class="px-5 text-center text-gray-500 dark:text-gray-400">
or
</div>
<div class="w-full h-0.5 bg-gray-200 dark:bg-gray-700"></div>
</div>
<div class="space-y-3">
<a
href="#"
class="w-full inline-flex items-center justify-center py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-gray-900 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
class="w-5 h-5 mr-2"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_13183_10121)">
<path
d="M20.3081 10.2303C20.3081 9.55056 20.253 8.86711 20.1354 8.19836H10.7031V12.0492H16.1046C15.8804 13.2911 15.1602 14.3898 14.1057 15.0879V17.5866H17.3282C19.2205 15.8449 20.3081 13.2728 20.3081 10.2303Z"
fill="#3F83F8"
/>
<path
d="M10.7019 20.0006C13.3989 20.0006 15.6734 19.1151 17.3306 17.5865L14.1081 15.0879C13.2115 15.6979 12.0541 16.0433 10.7056 16.0433C8.09669 16.0433 5.88468 14.2832 5.091 11.9169H1.76562V14.4927C3.46322 17.8695 6.92087 20.0006 10.7019 20.0006V20.0006Z"
fill="#34A853"
/>
<path
d="M5.08857 11.9169C4.66969 10.6749 4.66969 9.33008 5.08857 8.08811V5.51233H1.76688C0.348541 8.33798 0.348541 11.667 1.76688 14.4927L5.08857 11.9169V11.9169Z"
fill="#FBBC04"
/>
<path
d="M10.7019 3.95805C12.1276 3.936 13.5055 4.47247 14.538 5.45722L17.393 2.60218C15.5852 0.904587 13.1858 -0.0287217 10.7019 0.000673888C6.92087 0.000673888 3.46322 2.13185 1.76562 5.51234L5.08732 8.08813C5.87733 5.71811 8.09302 3.95805 10.7019 3.95805V3.95805Z"
fill="#EA4335"
/>
</g>
<defs>
<clipPath id="clip0_13183_10121">
<rect
width="20"
height="20"
fill="white"
transform="translate(0.5)"
/>
</clipPath>
</defs>
</svg>
Sign in with Google
</a>
<a
href="#"
class="w-full inline-flex items-center justify-center py-2.5 px-5 mr-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-gray-900 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
class="w-5 h-5 mr-2 text-gray-900 dark:text-white"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_13183_29163)">
<path
d="M18.6574 15.5863C18.3549 16.2851 17.9969 16.9283 17.5821 17.5196C17.0167 18.3257 16.5537 18.8838 16.1969 19.1936C15.6439 19.7022 15.0513 19.9627 14.4168 19.9775C13.9612 19.9775 13.4119 19.8479 12.7724 19.585C12.1308 19.3232 11.5412 19.1936 11.0021 19.1936C10.4366 19.1936 9.83024 19.3232 9.18162 19.585C8.53201 19.8479 8.00869 19.985 7.60858 19.9985C7.00008 20.0245 6.39356 19.7566 5.78814 19.1936C5.40174 18.8566 4.91842 18.2788 4.33942 17.4603C3.71821 16.5863 3.20749 15.5727 2.80738 14.4172C2.37887 13.1691 2.16406 11.9605 2.16406 10.7904C2.16406 9.45009 2.45368 8.29407 3.03379 7.32534C3.4897 6.54721 4.09622 5.9334 4.85533 5.4828C5.61445 5.03219 6.43467 4.80257 7.31797 4.78788C7.80129 4.78788 8.4351 4.93738 9.22273 5.2312C10.0081 5.52601 10.5124 5.67551 10.7335 5.67551C10.8988 5.67551 11.4591 5.5007 12.4088 5.15219C13.3069 4.82899 14.0649 4.69517 14.6859 4.74788C16.3685 4.88368 17.6327 5.54699 18.4734 6.74202C16.9685 7.65384 16.2241 8.93097 16.2389 10.5693C16.2525 11.8454 16.7154 12.9074 17.6253 13.7506C18.0376 14.1419 18.4981 14.4444 19.0104 14.6592C18.8993 14.9814 18.7821 15.29 18.6574 15.5863V15.5863ZM14.7982 0.400358C14.7982 1.40059 14.4328 2.3345 13.7044 3.19892C12.8254 4.22654 11.7623 4.82035 10.6093 4.72665C10.5947 4.60665 10.5861 4.48036 10.5861 4.34765C10.5861 3.38743 11.0041 2.3598 11.7465 1.51958C12.1171 1.09416 12.5884 0.740434 13.16 0.458257C13.7304 0.18029 14.2698 0.0265683 14.7772 0.000244141C14.7921 0.133959 14.7982 0.267682 14.7982 0.400345V0.400358Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_13183_29163">
<rect
width="20"
height="20"
fill="white"
transform="translate(0.5)"
/>
</clipPath>
</defs>
</svg>
Sign in with Apple
</a>
</div>
<div class="flex items-center justify-between">
<div class="flex items-start">
<div class="flex items-center h-5">
<input
id="remember"
aria-describedby="remember"
type="checkbox"
class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
required=""
/>
</div>
<div class="ml-3 text-sm">
<label for="remember" class="text-gray-500 dark:text-gray-300"
>Remember me</label
>
</div>
</div>
<a
href="#"
class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"
>Forgot password?</a
>
</div>
<button
type="submit"
class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Sign in to your account
</button>
</form>
</div>
</div>
<div class="mr-auto place-self-center lg:col-span-6">
<img
class="hidden mx-auto lg:flex"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/authentication/illustration.svg"
alt="illustration"
/>
</div>
</div>
</section>
<!-- Block end -->Background image
Use this example to show a background image on the whole page with the login form in the center of it.
Background image
html
<!-- Block start -->
<section
class="bg-[url('https://flowbite.s3.amazonaws.com/blocks/marketing-ui/authentication/background.jpg')] bg-no-repeat bg-cover bg-center bg-gray-700 bg-blend-multiply bg-opacity-60"
>
<div
class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen pt:mt-0"
>
<a
href="#"
class="flex items-center mb-6 text-2xl font-semibold text-white"
>
<img
class="w-8 h-8 mr-2"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg"
alt="logo"
/>
Flowbite
</a>
<div
class="w-full bg-white rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800"
>
<div class="p-6 space-y-4 md:space-y-6 lg:space-y-8 sm:p-8">
<h1
class="text-xl font-bold leading-tight tracking-tight text-center text-gray-900 md:text-2xl dark:text-white"
>
Sign in to your account
</h1>
<form class="space-y-4 md:space-y-6" action="#">
<div>
<label
for="email"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Your email</label
>
<input
type="email"
name="email"
id="email"
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
placeholder="name@company.com"
required=""
/>
</div>
<div>
<label
for="password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Password</label
>
<input
type="password"
name="password"
id="confirm-password"
placeholder="••••••••"
class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
required=""
/>
</div>
<div class="flex items-center justify-between">
<div class="flex items-start">
<div class="flex items-center h-5">
<input
id="remember"
aria-describedby="remember"
type="checkbox"
class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
required=""
/>
</div>
<div class="ml-3 text-sm">
<label for="remember" class="text-gray-500 dark:text-gray-300"
>Remember me</label
>
</div>
</div>
<a
href="#"
class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"
>Forgot password?</a
>
</div>
<button
type="submit"
class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Log in to your account
</button>
<p
class="text-sm font-light text-center text-gray-500 dark:text-gray-300"
>
<a
href="#"
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
>Don't have an account?</a
>
</p>
</form>
</div>
</div>
</div>
</section>
<!-- Block end -->Login form with description
Use this example of a page layout with two columns where on one side there is a login form and the other side a description of the website.
Login form with description
html
<!-- Block start -->
<section class="bg-white dark:bg-gray-900">
<div class="grid lg:h-screen lg:grid-cols-2">
<div class="flex items-center justify-center px-4 py-6 lg:py-0 sm:px-0">
<form
class="w-full max-w-md space-y-4 md:space-y-6 xl:max-w-xl"
action="#"
>
<h1 class="text-xl font-bold text-gray-900 dark:text-white">
Welcome back
</h1>
<div
class="items-center space-x-0 space-y-3 sm:flex sm:space-x-4 sm:space-y-0"
>
<a
href="#"
class="w-full inline-flex items-center justify-center py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-gray-900 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
class="w-5 h-5 mr-2"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_13183_10121)">
<path
d="M20.3081 10.2303C20.3081 9.55056 20.253 8.86711 20.1354 8.19836H10.7031V12.0492H16.1046C15.8804 13.2911 15.1602 14.3898 14.1057 15.0879V17.5866H17.3282C19.2205 15.8449 20.3081 13.2728 20.3081 10.2303Z"
fill="#3F83F8"
/>
<path
d="M10.7019 20.0006C13.3989 20.0006 15.6734 19.1151 17.3306 17.5865L14.1081 15.0879C13.2115 15.6979 12.0541 16.0433 10.7056 16.0433C8.09669 16.0433 5.88468 14.2832 5.091 11.9169H1.76562V14.4927C3.46322 17.8695 6.92087 20.0006 10.7019 20.0006V20.0006Z"
fill="#34A853"
/>
<path
d="M5.08857 11.9169C4.66969 10.6749 4.66969 9.33008 5.08857 8.08811V5.51233H1.76688C0.348541 8.33798 0.348541 11.667 1.76688 14.4927L5.08857 11.9169V11.9169Z"
fill="#FBBC04"
/>
<path
d="M10.7019 3.95805C12.1276 3.936 13.5055 4.47247 14.538 5.45722L17.393 2.60218C15.5852 0.904587 13.1858 -0.0287217 10.7019 0.000673888C6.92087 0.000673888 3.46322 2.13185 1.76562 5.51234L5.08732 8.08813C5.87733 5.71811 8.09302 3.95805 10.7019 3.95805V3.95805Z"
fill="#EA4335"
/>
</g>
<defs>
<clipPath id="clip0_13183_10121">
<rect
width="20"
height="20"
fill="white"
transform="translate(0.5)"
/>
</clipPath>
</defs>
</svg>
Sign in with Google
</a>
<a
href="#"
class="w-full inline-flex items-center justify-center py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-gray-900 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
>
<svg
class="w-5 h-5 mr-2 text-gray-900 dark:text-white"
viewBox="0 0 21 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_13183_29163)">
<path
d="M18.6574 15.5863C18.3549 16.2851 17.9969 16.9283 17.5821 17.5196C17.0167 18.3257 16.5537 18.8838 16.1969 19.1936C15.6439 19.7022 15.0513 19.9627 14.4168 19.9775C13.9612 19.9775 13.4119 19.8479 12.7724 19.585C12.1308 19.3232 11.5412 19.1936 11.0021 19.1936C10.4366 19.1936 9.83024 19.3232 9.18162 19.585C8.53201 19.8479 8.00869 19.985 7.60858 19.9985C7.00008 20.0245 6.39356 19.7566 5.78814 19.1936C5.40174 18.8566 4.91842 18.2788 4.33942 17.4603C3.71821 16.5863 3.20749 15.5727 2.80738 14.4172C2.37887 13.1691 2.16406 11.9605 2.16406 10.7904C2.16406 9.45009 2.45368 8.29407 3.03379 7.32534C3.4897 6.54721 4.09622 5.9334 4.85533 5.4828C5.61445 5.03219 6.43467 4.80257 7.31797 4.78788C7.80129 4.78788 8.4351 4.93738 9.22273 5.2312C10.0081 5.52601 10.5124 5.67551 10.7335 5.67551C10.8988 5.67551 11.4591 5.5007 12.4088 5.15219C13.3069 4.82899 14.0649 4.69517 14.6859 4.74788C16.3685 4.88368 17.6327 5.54699 18.4734 6.74202C16.9685 7.65384 16.2241 8.93097 16.2389 10.5693C16.2525 11.8454 16.7154 12.9074 17.6253 13.7506C18.0376 14.1419 18.4981 14.4444 19.0104 14.6592C18.8993 14.9814 18.7821 15.29 18.6574 15.5863V15.5863ZM14.7982 0.400358C14.7982 1.40059 14.4328 2.3345 13.7044 3.19892C12.8254 4.22654 11.7623 4.82035 10.6093 4.72665C10.5947 4.60665 10.5861 4.48036 10.5861 4.34765C10.5861 3.38743 11.0041 2.3598 11.7465 1.51958C12.1171 1.09416 12.5884 0.740434 13.16 0.458257C13.7304 0.18029 14.2698 0.0265683 14.7772 0.000244141C14.7921 0.133959 14.7982 0.267682 14.7982 0.400345V0.400358Z"
fill="currentColor"
/>
</g>
<defs>
<clipPath id="clip0_13183_29163">
<rect
width="20"
height="20"
fill="white"
transform="translate(0.5)"
/>
</clipPath>
</defs>
</svg>
Sign in with Apple
</a>
</div>
<div class="flex items-center">
<div class="w-full h-0.5 bg-gray-200 dark:bg-gray-700"></div>
<div class="px-5 text-center text-gray-500 dark:text-gray-400">
or
</div>
<div class="w-full h-0.5 bg-gray-200 dark:bg-gray-700"></div>
</div>
<div>
<label
for="email"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Email</label
>
<input
type="email"
name="email"
id="email"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
placeholder="Enter your email"
required=""
/>
</div>
<div>
<label
for="password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Password</label
>
<input
type="password"
name="password"
id="password"
placeholder="••••••••"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white"
required=""
/>
</div>
<div class="flex items-center justify-between">
<div class="flex items-start">
<div class="flex items-center h-5">
<input
id="remember"
aria-describedby="remember"
type="checkbox"
class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800"
required=""
/>
</div>
<div class="ml-3 text-sm">
<label for="remember" class="text-gray-500 dark:text-gray-300"
>Remember me</label
>
</div>
</div>
<a
href="#"
class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"
>Forgot password?</a
>
</div>
<button
type="submit"
class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Sign in to your account
</button>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">
Don't have an account?
<a
href="#"
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
>Sign up</a
>
</p>
</form>
</div>
<div
class="flex items-center justify-center px-4 py-6 bg-primary-600 lg:py-0 sm:px-0"
>
<div class="max-w-md xl:max-w-xl">
<a
href="#"
class="flex items-center mb-4 text-2xl font-semibold text-white"
>
<img
class="w-8 h-8 mr-2"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg"
alt="logo"
/>
Flowbite
</a>
<h1
class="mb-4 text-3xl font-extrabold leading-none tracking-tight text-white xl:text-5xl"
>
Explore the world’s leading design portfolios.
</h1>
<p class="mb-4 font-light text-primary-200 lg:mb-8">
Millions of designers and agencies around the world showcase their
portfolio work on Flowbite - the home to the world’s best design and
creative professionals.
</p>
<div class="flex items-center divide-x divide-primary-500">
<div class="flex pr-3 -space-x-4 sm:pr-5">
<img
class="w-10 h-10 border-2 border-white rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png"
alt="bonnie avatar"
/>
<img
class="w-10 h-10 border-2 border-white rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png"
alt="jese avatar"
/>
<img
class="w-10 h-10 border-2 border-white rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/roberta-casas.png"
alt="roberta avatar"
/>
<img
class="w-10 h-10 border-2 border-white rounded-full"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/thomas-lean.png"
alt="thomas avatar"
/>
</div>
<a href="#" class="pl-3 text-white sm:pl-5 dark:text-white">
<span class="text-sm text-primary-200"
>Over <span class="font-medium text-white">15.7k</span> Happy
Customers</span
>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Block end -->