Getting started
Layouts
Authentication
Kaida sign-up page with a form on the left and an image on the right.
Create an account
<div class="flex flex-col md:flex-row items-center w-full gap-64px">
<div class="flex flex-col flex-1 w-full md:w-5/12">
<div class="flex flex-col gap-48px origin-top-left max-w-[300px] mx-auto js_theme-layout-form">
<div class="flex sm:w-[110px]">
<button
type="button"
class="flex text-u1 font-semibold gap-8px items-center py-4px sm:p-8px logo">
<svg
width="24"
height="24"
viewbox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<rect
width="24"
height="24"
rx="2"
fill="black">
</rect>
<path
d="M9.18014 20.625C7.94299 13.8881 7.93689 10.1401 9.18014 3.5"
stroke="white"
stroke-width="4">
</path>
<path
d="M12.5 14.5L18.9952 18.25"
stroke="white"
stroke-width="4.5">
</path>
<circle
cx="15.25"
cy="8.25"
r="3.25"
fill="white">
</circle>
</svg>
Kaida
</button>
</div>
<div class="flex flex-col gap-20px">
<p class="text-h5">
Create an account
</p>
<div class="flex flex-col gap-32px">
<form
class="flex flex-col gap-24px"
action="#">
<div class="flex flex-col gap-12px">
<label class="flex flex-col gap-4px">
<span class="flex gap-4px text-p3 font-medium items-center">
Name
</span>
<div class="flex flex-col relative">
<input
type="text"
name="name"
placeholder="Write here"
class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all dark:text-white dark:placeholder:text-black-400 px-16px bg-white border-accent-200 hover:border-accent-600 focus:border-accent-600 active:border-accent-600 user-invalid:border-red-600 user-invalid:hover:border-red-600 user-invalid:focus:border-red-600 user-invalid:active:border-red-600 user-invalid:bg-red-50 dark:bg-black dark:border-black-600 dark:hover:border-black-400 dark:focus:border-black-400 dark:active:border-black-400 dark:user-invalid:bg-red-900 dark:user-invalid:bg-black shadow-[0_1px_2px_0px_#0000000D] focus:shadow-[0_0_0_2px_#0F172A33] dark:shadow-[0_1px_2px_0px_rgba(255,255,255,0.06)] dark:focus:shadow-[0_0_0_2px_rgba(255,255,255,0.33)] disabled:bg-gray-50 disabled:border-gray-100 dark:disabled:bg-gray-800 dark:disabled:border-gray-700 disabled:shadow-none [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px js_input-theme-element_radius"
pattern="[a-zA-Z0-9_]+"
value=""
autocomplete="off">
</input>
</div>
</label>
<label class="flex flex-col gap-4px">
<span class="flex gap-4px text-p3 font-medium items-center">
Email
</span>
<div class="flex flex-col relative">
<input
type="email"
name="email"
placeholder="example@email.com"
class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all dark:text-white dark:placeholder:text-black-400 px-16px bg-white border-accent-200 hover:border-accent-600 focus:border-accent-600 active:border-accent-600 user-invalid:border-red-600 user-invalid:hover:border-red-600 user-invalid:focus:border-red-600 user-invalid:active:border-red-600 user-invalid:bg-red-50 dark:bg-black dark:border-black-600 dark:hover:border-black-400 dark:focus:border-black-400 dark:active:border-black-400 dark:user-invalid:bg-red-900 dark:user-invalid:bg-black shadow-[0_1px_2px_0px_#0000000D] focus:shadow-[0_0_0_2px_#0F172A33] dark:shadow-[0_1px_2px_0px_rgba(255,255,255,0.06)] dark:focus:shadow-[0_0_0_2px_rgba(255,255,255,0.33)] disabled:bg-gray-50 disabled:border-gray-100 dark:disabled:bg-gray-800 dark:disabled:border-gray-700 disabled:shadow-none [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px js_input-theme-element_radius"
pattern="[a-zA-Z0-9_]+"
value=""
autocomplete="off">
</input>
</div>
</label>
<label
class="flex flex-col gap-4px"
hint_text="Must be at least 8 characters">
<span class="flex gap-4px text-p3 font-medium items-center">
Password
</span>
<div class="flex flex-col relative">
<input
type="password"
name="pass"
placeholder="Write here"
class="flex gap-8px items-center text-p2 peer text-black py-8px rounded-8px border placeholder:text-black-500 outline-none transition-all dark:text-white dark:placeholder:text-black-400 px-16px bg-white border-accent-200 hover:border-accent-600 focus:border-accent-600 active:border-accent-600 user-invalid:border-red-600 user-invalid:hover:border-red-600 user-invalid:focus:border-red-600 user-invalid:active:border-red-600 user-invalid:bg-red-50 dark:bg-black dark:border-black-600 dark:hover:border-black-400 dark:focus:border-black-400 dark:active:border-black-400 dark:user-invalid:bg-red-900 dark:user-invalid:bg-black shadow-[0_1px_2px_0px_#0000000D] focus:shadow-[0_0_0_2px_#0F172A33] dark:shadow-[0_1px_2px_0px_rgba(255,255,255,0.06)] dark:focus:shadow-[0_0_0_2px_rgba(255,255,255,0.33)] disabled:bg-gray-50 disabled:border-gray-100 dark:disabled:bg-gray-800 dark:disabled:border-gray-700 disabled:shadow-none [&_svg]:w-16px [&_svg]:h-16px [&_svg]:me-4px js_input-theme-element_radius"
pattern="[a-zA-Z0-9_]+"
value=""
autocomplete="new-password">
</input>
<ul
class="hidden flex-col mt-8px gap-4px text-black-500 text-p3"
data-password-target="checkingBlock">
<li
class="flex gap-4px items-center"
id="pass-length">
<span class="text-p3 leading-none text-red-500">
𐄂
</span>
8 characters long
</li>
<li
class="flex gap-4px items-center"
id="pass-uppercase">
<span class="text-p3 leading-none text-red-500">
𐄂
</span>
1 uppercase
</li>
<li
class="flex gap-4px items-center"
id="pass-lowercase">
<span class="text-p3 leading-none text-red-500">
𐄂
</span>
1 lowercase
</li>
<li
class="flex gap-4px items-center"
id="pass-number">
<span class="text-p3 leading-none text-red-500">
𐄂
</span>
1 number
</li>
<li
class="flex gap-4px items-center"
id="pass-special">
<span class="text-p3 leading-none text-red-500">
𐄂
</span>
1 special character (!@#$%^&*_+-=:;<>./?)
</li>
</ul>
<p class="text-p3 text-red-600 mt-4px hidden peer-user-invalid:flex">
Must be at least 8 characters
</p>
</div>
</label>
</div>
<div class="flex flex-col gap-16px">
<button
name="button"
type="button"
class="flex gap-8px items-center justify-center whitespace-nowrap py-8px px-16px text-btn1 [&>svg]:w-20px [&>svg]:h-20px rounded-8px text-white dark:text-accent-900 border disabled:opacity-30 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-accent-900 border-accent-900 hover:bg-accent-700 hover:border-accent-700 focus:bg-accent-700 focus:border-accent-700 active:bg-accent-500 active:border-accent-500 dark:bg-white dark:border-white dark:hover:bg-accent-200 dark:hover:border-accent-200 dark:focus:bg-accent-200 dark:focus:border-accent-200 dark:active:bg-accent-400 dark:active:border-accent-400 js_button-theme-element_radius"
title="Get started">
Get started
</button>
<p class="text-p3 text-center">
Already have an account?
<a
href="#"
class="no-underline text-blue-500 hover:text-blue-600 active:text-blue-700">
Sign in
</a>
</p>
</div>
</form>
<div class="flex gap-8px items-center">
<div class="flex-1 border-b border-black-100">
</div>
<p class="text-p4 text-black-700">
OR
</p>
<div class="flex-1 border-b border-black-100">
</div>
</div>
<a
href="#"
class="flex gap-8px items-center justify-center whitespace-nowrap py-8px px-16px text-btn1 [&>svg]:w-20px [&>svg]:h-20px rounded-8px text-black dark:text-white border disabled:opacity-40 focus:shadow-[0_0_0_2px_#FFFFFF,0_0_0_4px_#0F172A] dark:focus:shadow-[0_0_0_2px_#2d2e33,0_0_0_4px_#FFFFFF] bg-transparent border-black-100 hover:border-black focus:border-black active:bg-black-50 active:border-black dark:border-black-700 dark:hover:border-white dark:focus:border-white dark:active:bg-black-800 no-underline js_button-theme-element_radius">
<svg
width="15"
height="16"
viewbox="0 0 15 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_1312_6093)">
<path
d="M7.39844 6.79004V9.57841H11.2733C11.1032 10.4751 10.5926 11.2344 9.82677 11.745L12.1635 13.5581C13.5249 12.3014 14.3104 10.4556 14.3104 8.26284C14.3104 7.7523 14.2646 7.26135 14.1795 6.79012L7.39844 6.79004Z"
fill="#4285F4">
</path>
<path
d="M3.36321 9.46973L2.83619 9.87315L0.970703 11.3262C2.15543 13.676 4.58361 15.2993 7.39813 15.2993C9.34209 15.2993 10.9719 14.6579 12.1632 13.5582L9.82647 11.7451C9.18501 12.1771 8.36682 12.439 7.39813 12.439C5.52614 12.439 3.93565 11.1757 3.36615 9.47388L3.36321 9.46973Z"
fill="#34A853">
</path>
<path
d="M0.971526 4.87256C0.480644 5.84125 0.199219 6.93435 0.199219 8.09942C0.199219 9.26449 0.480644 10.3576 0.971526 11.3263C0.971526 11.3328 3.3672 9.46738 3.3672 9.46738C3.2232 9.03538 3.13809 8.57723 3.13809 8.09935C3.13809 7.62147 3.2232 7.16331 3.3672 6.73132L0.971526 4.87256Z"
fill="#FBBC05">
</path>
<path
d="M7.39828 3.76632C8.45866 3.76632 9.40119 4.13286 10.1539 4.83978L12.2157 2.77798C10.9655 1.61291 9.34231 0.899414 7.39828 0.899414C4.58376 0.899414 2.15543 2.51614 0.970703 4.87251L3.36631 6.73142C3.93573 5.02958 5.52629 3.76632 7.39828 3.76632Z"
fill="#EA4335">
</path>
</g>
<defs>
<clippath id="clip0_1312_6093">
<rect
width="14.4"
height="14.4"
fill="white"
transform="translate(0.199219 0.899414)">
</rect>
</clippath>
</defs>
</svg>
Sign up with Google
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col flex-1 md:w-7/12">
<img
src="/assets/images/shared/form-background.jpg"
loading="lazy"
class="w-full max-w-full min-h-[550px] object-cover rounded-8px">
</img>
</div>
</div>