User Onboarding
Use a collection of user onboarding pages to increase the chances of the adoption of your software by improving the introduction phase of your product.
Choose account type
Use this example as the first step of the user onboarding process to ask what type of account would your user like to create (ie. business or individual).
Choose account type
html
<!-- Block start -->
<section class="py-8 bg-white dark:bg-gray-900 lg:py-0">
<div class="lg:flex">
<div
class="hidden w-full max-w-md p-12 lg:h-screen lg:block bg-primary-600"
>
<div class="flex items-center mb-8 space-x-4">
<a href="#" class="flex items-center 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"
/>
Flowbite
</a>
<a
href="#"
class="inline-flex items-center text-sm font-medium text-primary-100 hover:text-white"
>
<svg
class="w-6 h-6 mr-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
Go back
</a>
</div>
<div class="block p-8 text-white rounded-lg bg-primary-500">
<h2 class="mb-1 text-2xl font-semibold">Your selected plan</h2>
<p class="mb-4 font-light text-primary-100 sm:text-lg">
30-day free trial
</p>
<!-- List -->
<ul role="list" class="space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>No setup, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Team size: <span class="font-semibold">1 developer</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Premium support:
<span class="font-semibold">6 months</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Free updates: <span class="font-semibold">6 months</span></span
>
</li>
</ul>
</div>
</div>
<div class="flex items-center mx-auto md:w-[42rem] px-4 md:px-8 xl:px-0">
<div class="w-full">
<div class="flex items-center justify-center mb-8 space-x-4 lg:hidden">
<a href="#" class="flex items-center text-2xl font-semibold">
<img
class="w-8 h-8 mr-2"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg"
/>
<span class="text-gray-900 dark:text-white">Flowbite</span>
</a>
</div>
<ol
class="flex items-center mb-6 text-sm font-medium text-center text-gray-500 dark:text-gray-400 lg:mb-12 sm:text-base"
>
<li
class="flex items-center after:content-[''] after:w-12 after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700"
>
<div
class="flex items-center sm:block after:content-['/'] sm:after:hidden after:mx-2 after:font-light after:text-gray-200 dark:after:text-gray-500"
>
<div class="mr-2 sm:mb-2 sm:mx-auto">1</div>
Personal <span class="hidden sm:inline-flex">Info</span>
</div>
</li>
<li
class="flex items-center after:content-[''] after:w-12 after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700"
>
<div
class="flex items-center sm:block after:content-['/'] sm:after:hidden after:mx-2 after:font-light after:text-gray-200 dark:after:text-gray-500"
>
<div class="mr-2 sm:mb-2 sm:mx-auto">2</div>
Account <span class="hidden sm:inline-flex">Info</span>
</div>
</li>
<li class="flex items-center sm:block">
<div class="mr-2 sm:mb-2 sm:mx-auto">3</div>
Confirmation
</li>
</ol>
<h1
class="mb-4 text-2xl font-extrabold leading-tight tracking-tight text-gray-900 sm:mb-6 dark:text-white"
>
Tell us about yourself
</h1>
<p class="mb-4 text-lg font-light text-gray-500 dark:text-gray-400">
What is your profession?
</p>
<ul class="mb-6 space-y-4 sm:space-y-6">
<li>
<input
type="radio"
id="designer"
name="profession"
value="designer"
class="hidden peer"
required
/>
<label
for="designer"
class="inline-flex items-center justify-center w-full p-5 text-gray-500 border-2 border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-primary-500 peer-checked:border-primary-600 peer-checked:text-primary-600 bg-gray-50 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700"
>
<svg
class="w-6 h-6 mr-2"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4 2a2 2 0 00-2 2v11a3 3 0 106 0V4a2 2 0 00-2-2H4zm1 14a1 1 0 100-2 1 1 0 000 2zm5-1.757l4.9-4.9a2 2 0 000-2.828L13.485 5.1a2 2 0 00-2.828 0L10 5.757v8.486zM16 18H9.071l6-6H16a2 2 0 012 2v2a2 2 0 01-2 2z"
clip-rule="evenodd"
></path>
</svg>
<span class="w-full">I’m a Designer</span>
<svg
class="w-6 h-6 ml-3"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</label>
</li>
<li>
<input
type="radio"
id="developer"
name="profession"
value="developer"
class="hidden peer"
/>
<label
for="developer"
class="inline-flex items-center justify-center w-full p-5 text-gray-500 border-2 border-gray-200 rounded-lg cursor-pointer dark:hover:text-gray-300 dark:border-gray-700 dark:peer-checked:text-primary-500 peer-checked:border-primary-600 peer-checked:text-primary-600 bg-gray-50 hover:text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:bg-gray-800 dark:hover:bg-gray-700"
>
<svg
class="w-6 h-6 mr-2"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="w-full">I’m a Developer</span>
<svg
class="w-6 h-6 ml-3"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</label>
</li>
</ul>
<button
class="w-full px-5 py-2.5 sm:py-3.5 text-sm font-medium text-center text-white rounded-lg bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Next: Account Info
</button>
<p class="mt-4 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>
</div>
</div>
</div>
</section>
<!-- Block end -->Account details
Use this step from the user onboarding process to ask for details such as the email address, full name, password, country and phone number.
Account details
html
<!-- Block start -->
<section class="py-8 bg-white dark:bg-gray-900 lg:py-0">
<div class="lg:flex">
<div
class="hidden w-full max-w-md p-12 lg:h-screen lg:block bg-primary-600"
>
<div class="flex items-center mb-8 space-x-4">
<a href="#" class="flex items-center 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"
/>
Flowbite
</a>
<a
href="#"
class="inline-flex items-center text-sm font-medium text-primary-100 hover:text-white"
>
<svg
class="w-6 h-6 mr-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
Go back
</a>
</div>
<div class="block p-8 text-white rounded-lg bg-primary-500">
<h3 class="mb-1 text-2xl font-semibold">Your selected plan</h3>
<p class="mb-4 font-light text-primary-100 sm:text-lg">
30-day free trial
</p>
<!-- List -->
<ul role="list" class="space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>No setup, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Team size: <span class="font-semibold">1 developer</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Premium support:
<span class="font-semibold">6 months</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Free updates: <span class="font-semibold">6 months</span></span
>
</li>
</ul>
</div>
</div>
<div class="flex items-center mx-auto md:w-[42rem] px-4 md:px-8 xl:px-0">
<div class="w-full">
<div class="flex items-center justify-center mb-8 space-x-4 lg:hidden">
<a href="#" class="flex items-center text-2xl font-semibold">
<img
class="w-8 h-8 mr-2"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg"
/>
<span class="text-gray-900 dark:text-white">Flowbite</span>
</a>
</div>
<ol
class="flex items-center mb-6 text-sm font-medium text-center text-gray-500 dark:text-gray-400 lg:mb-12 sm:text-base"
>
<li
class="flex items-center text-primary-600 dark:text-primary-500 sm:after:content-[''] after:w-12 after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700"
>
<div
class="flex items-center sm:block after:content-['/'] sm:after:hidden after:mx-2 after:font-light after:text-gray-200 dark:after:text-gray-500"
>
<svg
class="w-4 h-4 mr-2 sm:mb-2 sm:w-6 sm:h-6 sm:mx-auto"
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>
Personal <span class="hidden sm:inline-flex">Info</span>
</div>
</li>
<li
class="flex items-center after:content-[''] after:w-12 after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700"
>
<div
class="flex items-center sm:block after:content-['/'] sm:after:hidden after:mx-2 after:font-light after:text-gray-200 dark:after:text-gray-500"
>
<div class="mr-2 sm:mb-2 sm:mx-auto">2</div>
Account <span class="hidden sm:inline-flex">Info</span>
</div>
</li>
<li class="flex items-center sm:block">
<div class="mr-2 sm:mb-2 sm:mx-auto">3</div>
Confirmation
</li>
</ol>
<h1
class="mb-4 text-2xl font-extrabold tracking-tight text-gray-900 sm:mb-6 leding-tight dark:text-white"
>
Account details
</h1>
<form action="#">
<div class="grid gap-5 my-6 sm:grid-cols-2">
<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"
placeholder="Bonnie"
required=""
/>
</div>
<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="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>
<label
for="confirm-password"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Confirm password</label
>
<input
type="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>
<label
for="country"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Country</label
>
<select
id="country"
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 your country</option>
<option value="USA">USA</option>
<option value="UK">United Kingdom</option>
<option value="CA">Canada</option>
<option value="FR">France</option>
<option value="DE">Germany</option>
<option value="ES">Spain</option>
<option value="JP">Japan</option>
<option value="AUS">Australia</option>
</select>
</div>
<div>
<label
for="phone-number"
class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
>Phone</label
>
<input
type="number"
name="phone-number"
id="phone-number"
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="+123 567 890"
required=""
/>
</div>
</div>
<div class="mb-6 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>
<div class="flex space-x-3">
<a
href="#"
class="text-center items-center w-full py-2.5 sm:py-3.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-blue-700 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"
>Prev: Personal Info</a
>
<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 sm:py-3.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Next: Account Info
</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Block end -->Email verification with 6-digit code
Use this page to verify the email address of the user by sending a 6-digit code that has to be applied to this page before the account can be activated.
Email verification with 6-digit code
html
<!-- Block start -->
<section class="py-8 bg-white dark:bg-gray-900 lg:py-0">
<div class="lg:flex">
<div
class="hidden w-full max-w-md p-12 lg:h-screen lg:block bg-primary-600"
>
<div class="flex items-center mb-8 space-x-4">
<a href="#" class="flex items-center 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"
/>
Flowbite
</a>
<a
href="#"
class="inline-flex items-center text-sm font-medium text-primary-100 hover:text-white"
>
<svg
class="w-6 h-6 mr-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
Go back
</a>
</div>
<div class="block p-8 text-white rounded-lg bg-primary-500">
<h3 class="mb-1 text-2xl font-semibold">Your selected plan</h3>
<p class="mb-4 font-light text-primary-100 sm:text-lg">
30-day free trial
</p>
<!-- List -->
<ul role="list" class="space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>No setup, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Team size: <span class="font-semibold">1 developer</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Premium support:
<span class="font-semibold">6 months</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Free updates: <span class="font-semibold">6 months</span></span
>
</li>
</ul>
</div>
</div>
<div class="flex items-center mx-auto md:w-[42rem] px-4 md:px-8 xl:px-0">
<div class="w-full">
<div class="flex items-center justify-center mb-8 space-x-4 lg:hidden">
<a href="#" class="flex items-center text-2xl font-semibold">
<img
class="w-8 h-8 mr-2"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg"
/>
<span class="text-gray-900 dark:text-white">Flowbite</span>
</a>
</div>
<ol
class="flex items-center mb-6 text-sm font-medium text-center text-gray-500 dark:text-gray-400 lg:mb-12 sm:text-base"
>
<li
class="flex items-center text-primary-600 dark:text-primary-500 sm:after:content-[''] after:w-12 after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700"
>
<div
class="flex items-center sm:block after:content-['/'] sm:after:hidden after:mx-2 after:font-light after:text-gray-200 dark:after:text-gray-500"
>
<svg
class="w-4 h-4 mr-2 sm:mb-2 sm:w-6 sm:h-6 sm:mx-auto 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>
Personal <span class="hidden sm:inline-flex">Info</span>
</div>
</li>
<li
class="flex items-center text-primary-600 dark:text-primary-500 after:content-[''] after:w-12 after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700"
>
<div
class="flex items-center sm:block after:content-['/'] sm:after:hidden after:mx-2 after:font-light after:text-gray-200 dark:after:text-gray-500"
>
<svg
class="w-4 h-4 mr-2 sm:mb-2 sm:w-6 sm:h-6 sm:mx-auto 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>
Account <span class="hidden sm:inline-flex">Info</span>
</div>
</li>
<li class="flex items-center sm:block">
<div class="mr-2 sm:mb-2 sm:mx-auto">3</div>
Confirmation
</li>
</ol>
<h1
class="mb-2 text-2xl font-extrabold tracking-tight text-gray-900 leding-tight dark:text-white"
>
Verify your email address
</h1>
<p class="font-light text-gray-500 dark:text-gray-400">
We emailed you a six-digit code to
<span class="font-medium text-gray-900 dark:text-white"
>name@company.com</span
>. Enter the code below to confirm your email address.
</p>
<form action="#">
<div class="flex my-4 space-x-2 sm:space-x-4 md:my-6">
<div>
<label for="code-1" class="sr-only">First code</label>
<input
type="text"
maxlength="1"
onkeyup="focusNextInput(this, 'code-1', 'code-2')"
id="code-1"
class="block w-12 h-12 py-3 text-2xl font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg sm:py-4 sm:text-4xl sm:w-16 sm:h-16 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
required
/>
</div>
<div>
<label for="code-2" class="sr-only">Second code</label>
<input
type="text"
maxlength="1"
onkeyup="focusNextInput(this, 'code-1', 'code-3')"
id="code-2"
class="block w-12 h-12 py-3 text-2xl font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg sm:py-4 sm:text-4xl sm:w-16 sm:h-16 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
required
/>
</div>
<div>
<label for="code-3" class="sr-only">Third code</label>
<input
type="text"
maxlength="1"
onkeyup="focusNextInput(this, 'code-2', 'code-4')"
id="code-3"
class="block w-12 h-12 py-3 text-2xl font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg sm:py-4 sm:text-4xl sm:w-16 sm:h-16 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
required
/>
</div>
<div>
<label for="code-4" class="sr-only">Fourth code</label>
<input
type="text"
maxlength="1"
onkeyup="focusNextInput(this, 'code-3', 'code-5')"
id="code-4"
class="block w-12 h-12 py-3 text-2xl font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg sm:py-4 sm:text-4xl sm:w-16 sm:h-16 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
required
/>
</div>
<div>
<label for="code-5" class="sr-only">Fivth code</label>
<input
type="text"
maxlength="1"
onkeyup="focusNextInput(this, 'code-4', 'code-6')"
id="code-5"
class="block w-12 h-12 py-3 text-2xl font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg sm:py-4 sm:text-4xl sm:w-16 sm:h-16 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
required
/>
</div>
<div>
<label for="code-6" class="sr-only">Sixth code</label>
<input
type="text"
maxlength="1"
onkeyup="focusNextInput(this, 'code-5', 'code-6')"
id="code-6"
class="block w-12 h-12 py-3 text-2xl font-extrabold text-center text-gray-900 bg-white border border-gray-300 rounded-lg sm:py-4 sm:text-4xl sm:w-16 sm:h-16 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500"
required
/>
</div>
</div>
<p
class="p-4 mb-4 text-sm text-gray-500 rounded-lg bg-gray-50 dark:text-gray-400 md:mb-6 dark:bg-gray-800"
>
Make sure to keep this window open while check your inbox.
</p>
<div class="flex space-x-3">
<a
href="#"
class="text-center items-center w-full py-2.5 sm:py-3.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-primary-700 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"
>Prev: Account Info</a
>
<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 sm:py-3.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>
Verify account
</button>
</div>
</form>
</div>
</div>
</div>
</section>
<!-- Block end -->
<script>
function focusNextInput(el, prevId, nextId) {
if (el.value.length === 0) {
document.getElementById(prevId).focus()
} else {
document.getElementById(nextId).focus()
}
}
</script>Success message
Use the success message page as the last step of the onboarding process before the user can access their application dashboard interface and log into their account.
Success message
html
<!-- Block start -->
<section class="py-8 bg-white dark:bg-gray-900 lg:py-0">
<div class="lg:flex">
<div
class="hidden w-full max-w-md p-12 lg:h-screen lg:block bg-primary-600"
>
<div class="flex items-center mb-8 space-x-4">
<a href="#" class="flex items-center 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"
/>
Flowbite
</a>
<a
href="#"
class="inline-flex items-center text-sm font-medium text-primary-100 hover:text-white"
>
<svg
class="w-6 h-6 mr-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
Go back
</a>
</div>
<div class="block p-8 text-white rounded-lg bg-primary-500">
<h3 class="mb-1 text-2xl font-semibold">Your selected plan</h3>
<p class="mb-4 font-light text-primary-100 sm:text-lg">
30-day free trial
</p>
<!-- List -->
<ul role="list" class="space-y-4 text-left">
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>Individual configuration</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span>No setup, or hidden fees</span>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Team size: <span class="font-semibold">1 developer</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Premium support:
<span class="font-semibold">6 months</span></span
>
</li>
<li class="flex items-center space-x-3">
<!-- Icon -->
<svg
class="flex-shrink-0 w-5 h-5 text-green-300"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
clip-rule="evenodd"
></path>
</svg>
<span
>Free updates: <span class="font-semibold">6 months</span></span
>
</li>
</ul>
</div>
</div>
<div class="flex items-center mx-auto md:w-[42rem] px-4 md:px-8 xl:px-0">
<div class="w-full">
<div class="flex items-center justify-center mb-8 space-x-4 lg:hidden">
<a href="#" class="flex items-center text-2xl font-semibold">
<img
class="w-8 h-8 mr-2"
src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/logo.svg"
/>
<span class="text-gray-900 dark:text-white">Flowbite</span>
</a>
</div>
<ol
class="flex items-center mb-6 text-sm font-medium text-center text-gray-500 dark:text-gray-400 lg:mb-12 sm:text-base"
>
<li
class="flex items-center text-primary-600 dark:text-primary-500 sm:after:content-[''] after:w-12 after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700"
>
<div
class="flex items-center sm:block after:content-['/'] sm:after:hidden after:mx-2 after:font-light after:text-gray-200 dark:after:text-gray-500"
>
<svg
class="w-4 h-4 mr-2 sm:mb-2 sm:w-6 sm:h-6 sm:mx-auto 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>
Personal <span class="hidden sm:inline-flex">Info</span>
</div>
</li>
<li
class="flex items-center text-primary-600 dark:text-primary-500 after:content-[''] after:w-12 after:h-1 after:border-b after:border-gray-200 after:border-1 after:hidden sm:after:inline-block after:mx-6 xl:after:mx-10 dark:after:border-gray-700"
>
<div
class="flex items-center sm:block after:content-['/'] sm:after:hidden after:mx-2 after:font-light after:text-gray-200 dark:after:text-gray-500"
>
<svg
class="w-4 h-4 mr-2 sm:mb-2 sm:w-6 sm:h-6 sm:mx-auto 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>
Account <span class="hidden sm:inline-flex">Info</span>
</div>
</li>
<li class="flex items-center text-primary-600 dark:text-primary-500">
<div class="flex items-center sm:block">
<svg
class="w-4 h-4 mr-2 sm:mb-2 sm:w-6 sm:h-6 sm:mx-auto 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>
Confirmation
</div>
</li>
</ol>
<svg
class="w-12 h-12 mb-4 text-green-400"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M2.166 4.999A11.954 11.954 0 0010 1.944 11.954 11.954 0 0017.834 5c.11.65.166 1.32.166 2.001 0 5.225-3.34 9.67-8 11.317C5.34 16.67 2 12.225 2 7c0-.682.057-1.35.166-2.001zm11.541 3.708a1 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>
<h1
class="mb-2 text-2xl font-extrabold tracking-tight text-gray-900 leding-tight dark:text-white"
>
Verified
</h1>
<p class="mb-4 font-light text-gray-500 dark:text-gray-400 md:mb-6">
You have successfully verified your account.
</p>
<a
href="#"
class="block 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 sm:py-3.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
>Log in to your Account</a
>
</div>
</div>
</div>
</section>
<!-- Block end -->