Form Layout
From
<form class="p-6">
<div class="mb-4">
<label for="email"
class="form-label">Email</label>
<input type="email" id="email" class="form-input" placeholder="martinahernandezc@gmail.com"
autocomplete="off" required >
</div>
<div class="mb-4">
<label for="password"
class="form-label">Password</label>
<input type="password" id="password" class="form-input" placeholder="**********"
autocomplete="off" required >
</div>
<div class="flex items-center gap-2 select-none mb-6">
<input type="checkbox" checked
class="check check-primary-solid size-4 before:text-sm before:leading-none">
<label class="leading-none font-medium text-gray-500 dark:text-dark-text text-sm">Check
Out</label>
</div>
<button type="submit"
class="btn b-solid btn-primary-solid px-5 cursor-pointer">Continue</button>
</form>
Form with light color
<form class="p-6">
<div class="mb-4">
<label for="email-2"
class="form-label">Email</label>
<input type="email" id="email-2" class="form-input bg-[#F8F8FC] dark:bg-dark-card-two"
placeholder="martinahernandezc@gmail.com" autocomplete="off" required >
</div>
<div class="mb-4">
<label for="password-2"
class="form-label">Password</label>
<input type="password" id="password-2" class="form-input bg-[#F8F8FC] dark:bg-dark-card-two"
placeholder="**********" autocomplete="off" required >
</div>
<div class="flex items-center gap-2 select-none mb-6">
<input type="checkbox" checked
class="check check-primary-solid size-4 before:text-sm before:leading-none">
<label class="leading-none font-medium text-gray-500 dark:text-dark-text text-sm">Check
Out</label>
</div>
<button type="submit"
class="btn b-solid btn-primary-solid px-5 cursor-pointer">Continue</button>
</form>
Form with icon
<form class="p-6">
<div class="mb-4">
<label for="email-3" class="block mb-2 font-medium text-gray-500 dark:text-dark-text">Email</label>
<div class="flex">
<span class="form-input-group input-icon !text-gray-900 dark:text-dark-text">
<i class="ri-mail-line text-inherit"></i>
</span>
<input type="email" id="email-3" class="form-input rounded-l-none"
placeholder="martinahernandezc@gmail.com" required >
</div>
</div>
<div class="mb-4">
<label for="password-3" class="block mb-2 font-medium text-gray-500 dark:text-dark-text">Password</label>
<div class="flex">
<span class="form-input-group input-icon !text-gray-900 dark:text-dark-text">
<i class="ri-lock-unlock-line"></i>
</span>
<input type="password" id="password-3" class="form-input rounded-l-none"
placeholder="**********" required >
</div>
</div>
<div class="flex items-center gap-2 select-none mb-6">
<input type="checkbox" checked
class="check check-primary-solid size-4 before:text-sm before:leading-none">
<label class="leading-none font-medium text-gray-500 dark:text-dark-text text-sm">Check
Out</label>
</div>
<button type="submit"
class="btn b-solid btn-primary-solid px-5 cursor-pointer">Continue</button>
</form>
Form with icon light color
<form class="p-6">
<div class="mb-4">
<label for="email-4" class="block mb-2 font-medium text-gray-500 dark:text-dark-text">Email</label>
<div class="flex">
<span class="form-input-group input-icon !text-gray-900 dark:text-dark-text">
<i class="ri-mail-line text-inherit"></i>
</span>
<input type="email" id="email-4" class="form-input rounded-l-none bg-[#F8F8FC] dark:bg-dark-card-two"
placeholder="martinahernandezc@gmail.com" required >
</div>
</div>
<div class="mb-4">
<label for="password-4" class="block mb-2 font-medium text-gray-500 dark:text-dark-text">Password</label>
<div class="flex">
<span class="form-input-group input-icon !text-gray-900 dark:text-dark-text">
<i class="ri-lock-unlock-line"></i>
</span>
<input type="password" id="password-4" class="form-input rounded-l-none bg-[#F8F8FC] dark:bg-dark-card-two"
placeholder="**********" required >
</div>
</div>
<div class="flex items-center gap-2 select-none mb-6">
<input type="checkbox" checked
class="check check-primary-solid size-4 before:text-sm before:leading-none">
<label class="leading-none font-medium text-gray-500 dark:text-dark-text text-sm">Check
Out</label>
</div>
<button type="submit"
class="btn b-solid btn-primary-solid px-5 cursor-pointer">Continue</button>
</form>
Info From
<form class="p-6">
<div class="flex lg:flex-row flex-col gap-x-4">
<div class="w-full mb-4">
<label for="full_name" class="form-label">Full
Name</label>
<input type="text" id="full_name" class="form-input" placeholder="Martina Hernandezc"
autocomplete="off" required >
</div>
<div class="w-full mb-4">
<label for="address-1"
class="form-label">Address</label>
<input type="text" id="address-1" class="form-input" >
</div>
</div>
<div class="flex lg:flex-row flex-col gap-x-4">
<div class="w-full mb-4">
<label for="email-5"
class="form-label">Email</label>
<input type="email" id="email-5" class="form-input"
placeholder="martinahernandezc@gmail.com" autocomplete="off" required >
</div>
<div class="w-full mb-4">
<label for="password-5"
class="form-label">Password</label>
<input type="password" id="password-5" class="form-input" placeholder="**********"
autocomplete="off" required >
</div>
</div>
<div class="flex items-center gap-2 select-none mb-6">
<input type="checkbox" checked
class="check check-primary-solid size-4 before:text-sm before:leading-none">
<label class="leading-none font-medium text-gray-500 dark:text-dark-text text-sm">Check
Out</label>
</div>
<button type="submit"
class="btn b-solid btn-primary-solid px-5 cursor-pointer">Continue</button>
</form>
Data From
<form class="p-6">
<div class="flex lg:flex-row flex-col gap-x-4">
<div class="w-full mb-4">
<label for="full_name_data"
class="form-label">Full
Name</label>
<input type="text" id="full_name_data" class="form-input" placeholder="Savannah Nguyen"
autocomplete="off" required >
</div>
<div class="w-full mb-4">
<label for="email-6"
class="form-label">Email</label>
<input type="email" id="email-6" class="form-input"
placeholder="martinahernandezc@gmail.com" autocomplete="off" required >
</div>
<div class="w-full mb-4">
<label for="password-6"
class="form-label">Password</label>
<input type="password" id="password-6" class="form-input" placeholder="**********"
autocomplete="off" required >
</div>
</div>
<div class="flex lg:flex-row flex-col gap-x-4 mb-2">
<div class="w-full mb-4">
<label for="location"
class="form-label">Location</label>
<input type="text" id="location" class="form-input" >
</div>
<div class="w-full mb-4">
<label for="phone"
class="form-label">Phone</label>
<input type="tel" id="phone" class="form-input" placeholder="(+33)7 55 55 33 70"
autocomplete="off" required >
</div>
<div class="w-full mb-4">
<label for="state"
class="form-label">State</label>
<input type="text" id="state" class="form-input" placeholder="8080 Railroad St."
autocomplete="off" required >
</div>
</div>
<div class="mb-6">
<div class="summernote"></div>
</div>
<div class="flex items-center gap-2 select-none mb-6">
<input type="checkbox" checked
class="check check-primary-solid size-4 before:text-sm before:leading-none">
<label class="leading-none font-medium text-gray-500 dark:text-dark-text text-sm">Check
Out</label>
</div>
<button type="submit"
class="btn b-solid btn-primary-solid px-5 cursor-pointer">Save & Continue</button>
</form>