Register Forms
- Default register page
- Social media authentication
- Register with illustration
- Background image
- Register form with description
Use a collection of register pages to let your users create an account on your website based on multiple layouts, social media authentication, and more.
Default register page
This example can be used to allow users to create an account on your website using their email address and password and also a checkbox with the terms and conditions as a requirement.
Default register 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"
>
Create and 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>
<label
for="confirm-password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Confirm password</label
>
<input
type="confirm-password"
name="confirm-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 dark:focus:ring-blue-500 dark:focus:border-blue-500"
required=""
/>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input
id="terms"
aria-describedby="terms"
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="terms"
class="font-light text-gray-500 dark:text-gray-300"
>I accept the
<a
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
href="#"
>Terms and Conditions</a
></label
>
</div>
</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"
>
Create an account
</button>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">
Already have an account?
<a
href="#"
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
>Login here</a
>
</p>
</form>
</div>
</div>
</div>
</section>
<!-- Block end -->Social media authentication
Use this example to allow users to authenticate using their social media accounts such as Google or Apple and also a list of features on the left side of the page.
Social media authentication
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 mr-auto lg:flex lg:col-span-5 xl:col-span-6 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 mx-auto bg-white rounded-lg shadow dark:bg-gray-800 md:mt-0 sm:max-w-lg xl:p-0 lg:col-span-7 xl:col-span-6"
>
<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"
>
Create your Free Account
</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>
Sign up 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 up 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"
>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="countries"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Country</label
>
<select
id="countries"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 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"
>
<option selected="">Choose a country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
</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-start">
<div class="flex items-center h-5">
<input
id="terms"
aria-describedby="terms"
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="terms"
class="font-light text-gray-500 dark:text-gray-300"
>By signing up, you are creating a Flowbite account, and you
agree to Flowbite’s
<a
class="font-medium text-primary-600 dark:text-primary-500 hover:underline"
href="#"
>Terms of Use</a
>
and
<a
class="font-medium text-primary-600 dark:text-primary-500 hover:underline"
href="#"
>Privacy Policy</a
>.</label
>
</div>
</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"
>
Create an account
</button>
<p class="text-sm font-light text-gray-500 dark:text-gray-400">
Already have an account?
<a
href="#"
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
>Sign in here</a
>
</p>
</form>
</div>
</div>
</div>
</section>
<!-- Block end -->Register with illustration
Get started with this example of a registration form with multiple data, social media authentication, and a visually impactful 3D illustration on the right side of the page.
Register 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 p-6 mx-auto bg-white rounded-lg shadow dark:bg-gray-800 sm:max-w-xl lg:col-span-6 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"
>
Create your Account
</h1>
<p class="text-sm font-light text-gray-500 dark:text-gray-300">
Start your website in seconds. Already have an account?
<a
href="#"
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
>Login here</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"
>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="full-name"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Full Name</label
>
<input
type="text"
name="full-name"
id="full-name"
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="e.g. Bonnie Green"
required=""
/>
</div>
<div>
<label
for="countries"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-400"
>Country</label
>
<select
id="countries"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 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"
>
<option selected="">Choose a country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
</select>
</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 up 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 up with Apple
</a>
</div>
<div class="space-y-3">
<div class="flex items-start">
<div class="flex items-center h-5">
<input
id="terms"
aria-describedby="terms"
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="terms"
class="font-light text-gray-500 dark:text-gray-300"
>By signing up, you are creating a Flowbite account, and you
agree to Flowbite’s
<a
class="font-medium text-primary-600 dark:text-primary-500 hover:underline"
href="#"
>Terms of Use</a
>
and
<a
class="font-medium text-primary-600 dark:text-primary-500 hover:underline"
href="#"
>Privacy Policy</a
>.</label
>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input
id="newsletter"
aria-describedby="newsletter"
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="newsletter"
class="font-light text-gray-500 dark:text-gray-300"
>Email me about product updates and resources.</label
>
</div>
</div>
</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"
>
Create an account
</button>
</form>
</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 register form example to show a background image on the whole page to create an immersive look.
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"
>
<svg
class="h-8 mr-2"
viewBox="0 0 33 33"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M25.2696 13.126C25.1955 13.6364 24.8589 14.3299 24.4728 14.9328C23.9856 15.6936 23.2125 16.2264 22.3276 16.4114L18.43 17.2265C17.8035 17.3575 17.2355 17.6853 16.8089 18.1621L14.2533 21.0188C13.773 21.5556 13.4373 21.4276 13.4373 20.7075C13.4315 20.7342 12.1689 23.9903 15.5149 25.9202C16.8005 26.6618 18.6511 26.3953 19.9367 25.6538L26.7486 21.7247C29.2961 20.2553 31.0948 17.7695 31.6926 14.892C31.7163 14.7781 31.7345 14.6639 31.7542 14.5498L25.2696 13.126Z"
fill="url(#paint0_linear_11430_22515)"
/>
<path
d="M23.5028 9.20133C24.7884 9.94288 25.3137 11.0469 25.3137 12.53C25.3137 12.7313 25.2979 12.9302 25.2694 13.1261L28.0141 14.3051L31.754 14.5499C32.2329 11.7784 31.2944 8.92561 29.612 6.65804C28.3459 4.9516 26.7167 3.47073 24.7581 2.34097C23.167 1.42325 21.5136 0.818599 19.8525 0.486816L17.9861 2.90382L17.3965 5.67918L23.5028 9.20133Z"
fill="url(#paint1_linear_11430_22515)"
/>
<path
d="M1.5336 11.2352C1.5329 11.2373 1.53483 11.238 1.53556 11.2358C1.67958 10.8038 1.86018 10.3219 2.08564 9.80704C3.26334 7.11765 5.53286 5.32397 8.32492 4.40943C11.117 3.49491 14.1655 3.81547 16.7101 5.28323L17.3965 5.67913L19.8525 0.486761C12.041 -1.07341 4.05728 3.51588 1.54353 11.2051C1.54233 11.2087 1.53796 11.2216 1.5336 11.2352Z"
fill="url(#paint2_linear_11430_22515)"
/>
<path
d="M19.6699 25.6538C18.3843 26.3953 16.8003 26.3953 15.5147 25.6538C15.3402 25.5531 15.1757 25.4399 15.0201 25.3174L12.7591 26.8719L10.8103 30.0209C12.9733 31.821 15.7821 32.3997 18.589 32.0779C20.7013 31.8357 22.7995 31.1665 24.7582 30.0368C26.3492 29.1191 27.7 27.9909 28.8182 26.7195L27.6563 23.8962L25.7762 22.1316L19.6699 25.6538Z"
fill="url(#paint3_linear_11430_22515)"
/>
<path
d="M15.0201 25.3175C14.0296 24.5373 13.4371 23.3406 13.4371 22.0588V21.931V11.2558C13.4371 10.6521 13.615 10.5494 14.1384 10.8513C13.3323 10.3864 11.4703 8.79036 9.17118 10.1165C7.88557 10.858 6.8269 12.4949 6.8269 13.978V21.8362C6.8269 24.775 8.34906 27.8406 10.5445 29.7966C10.6313 29.874 10.7212 29.9469 10.8103 30.0211L15.0201 25.3175Z"
fill="url(#paint4_linear_11430_22515)"
/>
<path
d="M28.6604 5.49565C28.6589 5.49395 28.6573 5.49532 28.6589 5.49703C28.9613 5.83763 29.2888 6.23485 29.6223 6.68734C31.3648 9.05099 32.0158 12.0447 31.4126 14.9176C30.8093 17.7906 29.0071 20.2679 26.4625 21.7357L25.7761 22.1316L28.8181 26.7195C34.0764 20.741 34.09 11.5388 28.6815 5.51929C28.6789 5.51641 28.67 5.50622 28.6604 5.49565Z"
fill="url(#paint5_linear_11430_22515)"
/>
<path
d="M7.09355 13.978C7.09354 12.4949 7.88551 11.1244 9.17113 10.3829C9.34564 10.2822 9.52601 10.1965 9.71002 10.1231L9.49304 7.38962L7.96861 4.26221C5.32671 5.23364 3.1897 7.24125 2.06528 9.83067C1.2191 11.7793 0.75001 13.9294 0.75 16.1888C0.75 18.0243 1.05255 19.7571 1.59553 21.3603L4.62391 21.7666L7.09355 21.0223V13.978Z"
fill="url(#paint6_linear_11430_22515)"
/>
<path
d="M9.71016 10.1231C10.8817 9.65623 12.2153 9.74199 13.3264 10.3829L13.4372 10.4468L22.3326 15.5777C22.9566 15.9376 22.8999 16.2918 22.1946 16.4392L22.7078 16.332C23.383 16.1908 23.9999 15.8457 24.4717 15.3428C25.2828 14.4782 25.5806 13.4351 25.5806 12.5299C25.5806 11.0468 24.7886 9.67634 23.503 8.93479L16.6911 5.00568C14.1436 3.53627 11.0895 3.22294 8.29622 4.14442C8.18572 4.18087 8.07756 4.2222 7.96875 4.26221L9.71016 10.1231Z"
fill="url(#paint7_linear_11430_22515)"
/>
<path
d="M20.0721 31.8357C20.0744 31.8352 20.0739 31.8332 20.0717 31.8337C19.6252 31.925 19.1172 32.0097 18.5581 32.0721C15.638 32.3978 12.7174 31.4643 10.5286 29.5059C8.33986 27.5474 7.09347 24.7495 7.09348 21.814L7.09347 21.0222L1.59546 21.3602C4.1488 28.8989 12.1189 33.5118 20.0411 31.8421C20.0449 31.8413 20.0582 31.8387 20.0721 31.8357Z"
fill="url(#paint8_linear_11430_22515)"
/>
<defs>
<linearGradient
id="paint0_linear_11430_22515"
x1="20.8102"
y1="23.9532"
x2="23.9577"
y2="12.9901"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient
id="paint1_linear_11430_22515"
x1="28.0593"
y1="10.5837"
x2="19.7797"
y2="2.33321"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient
id="paint2_linear_11430_22515"
x1="16.9145"
y1="5.2045"
x2="4.42432"
y2="5.99375"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
<linearGradient
id="paint3_linear_11430_22515"
x1="16.0698"
y1="28.846"
x2="27.2866"
y2="25.8192"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient
id="paint4_linear_11430_22515"
x1="8.01881"
y1="15.8661"
x2="15.9825"
y2="24.1181"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient
id="paint5_linear_11430_22515"
x1="26.2004"
y1="21.8189"
x2="31.7569"
y2="10.6178"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
<linearGradient
id="paint6_linear_11430_22515"
x1="6.11387"
y1="9.31427"
x2="3.14054"
y2="20.4898"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient
id="paint7_linear_11430_22515"
x1="21.2932"
y1="8.78271"
x2="10.4278"
y2="11.488"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient
id="paint8_linear_11430_22515"
x1="7.15667"
y1="21.5399"
x2="14.0824"
y2="31.9579"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
</defs>
</svg>
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">
<h2
class="text-xl font-bold leading-tight tracking-tight text-center text-gray-900 md:text-2xl dark:text-white"
>
Create your Free Account
</h2>
<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="username"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Password</label
>
<input
type="text"
name="username"
id="username"
placeholder="@bonnie"
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>
<label
for="confirm-password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Confirm password</label
>
<input
type="confirm-password"
name="confirm-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>
<p
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>
Birth Date
</p>
<div class="flex items-center">
<div class="w-full mr-4">
<label for="day" class="sr-only">Day</label>
<select
id="day"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 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"
>
<option selected="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<div class="w-full mr-4">
<label for="month" class="sr-only">Month</label>
<select
id="month"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 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"
>
<option selected="">Month</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
<div class="w-full">
<label for="year" class="sr-only">Year</label>
<select
id="year"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 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"
>
<option selected="">Year</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
</select>
</div>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input
id="newsletter"
aria-describedby="newsletter"
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="newsletter"
class="font-light text-gray-500 dark:text-gray-300"
>I accept the
<a
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
href="#"
>Terms and Conditions</a
></label
>
</div>
</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"
>
Create an 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"
>Already have an account?</a
>
</p>
</form>
</div>
</div>
</div>
</section>
<!-- Block end -->Register form with description
Use this registration form to also show a description of your website on the right side of the page.
Register 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 justify-center items-center py-6 px-4 lg:py-0 sm:px-0">
<form class="space-y-4 max-w-md md:space-y-6 xl:max-w-xl" action="#">
<h2 class="text-xl font-bold text-gray-900 dark:text-white">
Your Best Work Starts Here
</h2>
<div
class="items-center space-y-3 space-x-0 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="mr-2 w-5 h-5"
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 up 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="mr-2 w-5 h-5 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 up 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="full-name"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>What should we call you?</label
>
<input
type="text"
name="full-name"
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="e.g. Bonnie Green"
required=""
/>
</div>
<div>
<label
for="email"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Your 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="name@company.com"
required=""
/>
</div>
<div>
<label
for="password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300"
>Your 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="space-y-3">
<div class="flex items-start">
<div class="flex items-center h-5">
<input
id="terms"
aria-describedby="terms"
type="checkbox"
class="w-4 h-4 bg-gray-50 rounded border border-gray-300 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="terms"
class="font-light text-gray-500 dark:text-gray-300"
>By signing up, you are creating a Flowbite account, and you
agree to Flowbite’s
<a
class="font-medium text-primary-600 dark:text-primary-500 hover:underline"
href="#"
>Terms of Use</a
>
and
<a
class="font-medium text-primary-600 dark:text-primary-500 hover:underline"
href="#"
>Privacy Policy</a
>.</label
>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input
id="newsletter"
aria-describedby="newsletter"
type="checkbox"
class="w-4 h-4 bg-gray-50 rounded border border-gray-300 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="newsletter"
class="font-light text-gray-500 dark:text-gray-300"
>Email me about product updates and resources.</label
>
</div>
</div>
</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-700"
>
Create an account
</button>
<p class="text-sm font-light text-gray-500 dark:text-gray-300">
Already have an account?
<a
href="#"
class="font-medium text-primary-600 hover:underline dark:text-primary-500"
>Login here</a
>
</p>
</form>
</div>
<div
class="flex justify-center items-center py-6 px-4 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"
>
<svg
class="mr-2 h-8"
viewBox="0 0 33 33"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M25.2696 13.126C25.1955 13.6364 24.8589 14.3299 24.4728 14.9328C23.9856 15.6936 23.2125 16.2264 22.3276 16.4114L18.43 17.2265C17.8035 17.3575 17.2355 17.6853 16.8089 18.1621L14.2533 21.0188C13.773 21.5556 13.4373 21.4276 13.4373 20.7075C13.4315 20.7342 12.1689 23.9903 15.5149 25.9202C16.8005 26.6618 18.6511 26.3953 19.9367 25.6538L26.7486 21.7247C29.2961 20.2553 31.0948 17.7695 31.6926 14.892C31.7163 14.7781 31.7345 14.6639 31.7542 14.5498L25.2696 13.126Z"
fill="url(#paint0_linear_11430_22515)"
/>
<path
d="M23.5028 9.20133C24.7884 9.94288 25.3137 11.0469 25.3137 12.53C25.3137 12.7313 25.2979 12.9302 25.2694 13.1261L28.0141 14.3051L31.754 14.5499C32.2329 11.7784 31.2944 8.92561 29.612 6.65804C28.3459 4.9516 26.7167 3.47073 24.7581 2.34097C23.167 1.42325 21.5136 0.818599 19.8525 0.486816L17.9861 2.90382L17.3965 5.67918L23.5028 9.20133Z"
fill="url(#paint1_linear_11430_22515)"
/>
<path
d="M1.5336 11.2352C1.5329 11.2373 1.53483 11.238 1.53556 11.2358C1.67958 10.8038 1.86018 10.3219 2.08564 9.80704C3.26334 7.11765 5.53286 5.32397 8.32492 4.40943C11.117 3.49491 14.1655 3.81547 16.7101 5.28323L17.3965 5.67913L19.8525 0.486761C12.041 -1.07341 4.05728 3.51588 1.54353 11.2051C1.54233 11.2087 1.53796 11.2216 1.5336 11.2352Z"
fill="url(#paint2_linear_11430_22515)"
/>
<path
d="M19.6699 25.6538C18.3843 26.3953 16.8003 26.3953 15.5147 25.6538C15.3402 25.5531 15.1757 25.4399 15.0201 25.3174L12.7591 26.8719L10.8103 30.0209C12.9733 31.821 15.7821 32.3997 18.589 32.0779C20.7013 31.8357 22.7995 31.1665 24.7582 30.0368C26.3492 29.1191 27.7 27.9909 28.8182 26.7195L27.6563 23.8962L25.7762 22.1316L19.6699 25.6538Z"
fill="url(#paint3_linear_11430_22515)"
/>
<path
d="M15.0201 25.3175C14.0296 24.5373 13.4371 23.3406 13.4371 22.0588V21.931V11.2558C13.4371 10.6521 13.615 10.5494 14.1384 10.8513C13.3323 10.3864 11.4703 8.79036 9.17118 10.1165C7.88557 10.858 6.8269 12.4949 6.8269 13.978V21.8362C6.8269 24.775 8.34906 27.8406 10.5445 29.7966C10.6313 29.874 10.7212 29.9469 10.8103 30.0211L15.0201 25.3175Z"
fill="url(#paint4_linear_11430_22515)"
/>
<path
d="M28.6604 5.49565C28.6589 5.49395 28.6573 5.49532 28.6589 5.49703C28.9613 5.83763 29.2888 6.23485 29.6223 6.68734C31.3648 9.05099 32.0158 12.0447 31.4126 14.9176C30.8093 17.7906 29.0071 20.2679 26.4625 21.7357L25.7761 22.1316L28.8181 26.7195C34.0764 20.741 34.09 11.5388 28.6815 5.51929C28.6789 5.51641 28.67 5.50622 28.6604 5.49565Z"
fill="url(#paint5_linear_11430_22515)"
/>
<path
d="M7.09355 13.978C7.09354 12.4949 7.88551 11.1244 9.17113 10.3829C9.34564 10.2822 9.52601 10.1965 9.71002 10.1231L9.49304 7.38962L7.96861 4.26221C5.32671 5.23364 3.1897 7.24125 2.06528 9.83067C1.2191 11.7793 0.75001 13.9294 0.75 16.1888C0.75 18.0243 1.05255 19.7571 1.59553 21.3603L4.62391 21.7666L7.09355 21.0223V13.978Z"
fill="url(#paint6_linear_11430_22515)"
/>
<path
d="M9.71016 10.1231C10.8817 9.65623 12.2153 9.74199 13.3264 10.3829L13.4372 10.4468L22.3326 15.5777C22.9566 15.9376 22.8999 16.2918 22.1946 16.4392L22.7078 16.332C23.383 16.1908 23.9999 15.8457 24.4717 15.3428C25.2828 14.4782 25.5806 13.4351 25.5806 12.5299C25.5806 11.0468 24.7886 9.67634 23.503 8.93479L16.6911 5.00568C14.1436 3.53627 11.0895 3.22294 8.29622 4.14442C8.18572 4.18087 8.07756 4.2222 7.96875 4.26221L9.71016 10.1231Z"
fill="url(#paint7_linear_11430_22515)"
/>
<path
d="M20.0721 31.8357C20.0744 31.8352 20.0739 31.8332 20.0717 31.8337C19.6252 31.925 19.1172 32.0097 18.5581 32.0721C15.638 32.3978 12.7174 31.4643 10.5286 29.5059C8.33986 27.5474 7.09347 24.7495 7.09348 21.814L7.09347 21.0222L1.59546 21.3602C4.1488 28.8989 12.1189 33.5118 20.0411 31.8421C20.0449 31.8413 20.0582 31.8387 20.0721 31.8357Z"
fill="url(#paint8_linear_11430_22515)"
/>
<defs>
<linearGradient
id="paint0_linear_11430_22515"
x1="20.8102"
y1="23.9532"
x2="23.9577"
y2="12.9901"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient
id="paint1_linear_11430_22515"
x1="28.0593"
y1="10.5837"
x2="19.7797"
y2="2.33321"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient
id="paint2_linear_11430_22515"
x1="16.9145"
y1="5.2045"
x2="4.42432"
y2="5.99375"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
<linearGradient
id="paint3_linear_11430_22515"
x1="16.0698"
y1="28.846"
x2="27.2866"
y2="25.8192"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient
id="paint4_linear_11430_22515"
x1="8.01881"
y1="15.8661"
x2="15.9825"
y2="24.1181"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient
id="paint5_linear_11430_22515"
x1="26.2004"
y1="21.8189"
x2="31.7569"
y2="10.6178"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
<linearGradient
id="paint6_linear_11430_22515"
x1="6.11387"
y1="9.31427"
x2="3.14054"
y2="20.4898"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1C64F2" />
<stop offset="1" stop-color="#0092FF" />
</linearGradient>
<linearGradient
id="paint7_linear_11430_22515"
x1="21.2932"
y1="8.78271"
x2="10.4278"
y2="11.488"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#1724C9" />
<stop offset="1" stop-color="#1C64F2" />
</linearGradient>
<linearGradient
id="paint8_linear_11430_22515"
x1="7.15667"
y1="21.5399"
x2="14.0824"
y2="31.9579"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#0092FF" />
<stop offset="1" stop-color="#45B2FF" />
</linearGradient>
</defs>
</svg>
Flowbite
</a>
<h1
class="mb-4 text-3xl font-extrabold tracking-tight leading-none 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 -->