Design your space exactly how you want it !
<div>
<label for="first_name" class="form-label">First name</label>
<input type="text" id="first_name" class="form-input" placeholder="First Name" autocomplete="off" required >
</div>
<div>
<label for="last_name" class="form-label">Last Name</label>
<input type="text" id="last_name" class="form-input bg-[#F8F8FC] dark:bg-dark-card-two" placeholder="Last Name" autocomplete="off" required >
</div>
<div>
<label class="form-label">Type Date</label>
<div class="flex">
<span class="form-input-group input-icon">
<i class="ri-calendar-line text-inherit"></i>
</span>
<input type="date" class="form-input rounded-l-none bg-[#F8F8FC] dark:bg-dark-card-two" required >
</div>
</div>
<div>
<label class="form-label">Time</label>
<div class="flex">
<span class="form-input-group input-icon">
<i class="ri-time-line text-inherit"></i>
</span>
<input type="time" value="16:20" class="form-input rounded-l-none bg-[#F8F8FC] dark:bg-dark-card-two" required >
</div>
</div>
<div>
<label class="form-label">Type Email</label>
<div class="flex">
<span class="form-input-group input-icon">
<i class="ri-mail-line text-inherit"></i>
</span>
<input type="email" class="form-input rounded-l-none bg-[#F8F8FC] dark:bg-dark-card-two" placeholder="example@gmail.com" required >
</div>
</div>
<div>
<label class="form-label">Type URL</label>
<div class="flex">
<span class="form-input-group input-icon">
<i class="ri-links-fill text-inherit"></i>
</span>
<input type="url" class="form-input rounded-l-none bg-[#F8F8FC] dark:bg-dark-card-two" placeholder="http://example.com" required >
</div>
</div>
<div>
<label class="form-label">Type Date</label>
<div class="flex">
<span class="form-input-group input-icon bg-[#F8F8FC] dark:bg-dark-card-two">
<i class="ri-calendar-line text-inherit"></i>
</span>
<input type="date" class="form-input rounded-l-none" required >
</div>
</div>
<div>
<label class="form-label">Time</label>
<div class="flex">
<span class="form-input-group input-icon bg-[#F8F8FC] dark:bg-dark-card-two">
<i class="ri-time-line text-inherit"></i>
</span>
<input type="time" value="16:20" class="form-input rounded-l-none" required >
</div>
</div>
<div>
<label class="form-label">Type Email</label>
<div class="flex">
<span class="form-input-group input-icon bg-[#F8F8FC] dark:bg-dark-card-two">
<i class="ri-mail-line text-inherit"></i>
</span>
<input type="email" class="form-input rounded-l-none" placeholder="example@gmail.com" required >
</div>
</div>
<div>
<label class="form-label">Type URL</label>
<div class="flex">
<span class="form-input-group input-icon bg-[#F8F8FC] dark:bg-dark-card-two">
<i class="ri-links-fill text-inherit"></i>
</span>
<input type="url" class="form-input rounded-l-none" placeholder="http://example.com" required >
</div>
</div>
<div>
<label class="form-label">Type Date</label>
<div class="flex">
<span class="form-input-group input-icon !text-gray-900 dark:text-dark-text">
<i class="ri-calendar-line text-inherit"></i>
</span>
<input type="date" class="form-input rounded-l-none bg-[#F8F8F8] dark:bg-dark-card-two" required >
</div>
</div>
<div>
<label class="form-label">Time</label>
<div class="flex">
<span class="form-input-group input-icon !text-gray-900 dark:text-dark-text">
<i class="ri-time-line text-inherit"></i>
</span>
<input type="time" value="16:20" class="form-input rounded-l-none bg-[#F8F8F8] dark:bg-dark-card-two" required >
</div>
</div>
<div>
<label class="form-label">Type 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" class="form-input rounded-l-none bg-[#F8F8F8] dark:bg-dark-card-two" placeholder="example@gmail.com" required >
</div>
</div>
<div>
<label class="form-label">Type URL</label>
<div class="flex">
<span class="form-input-group input-icon !text-gray-900 dark:text-dark-text">
<i class="ri-links-fill text-inherit"></i>
</span>
<input type="url" class="form-input rounded-l-none bg-[#F8F8F8] dark:bg-dark-card-two" placeholder="http://example.com" required >
</div>
</div>
<div>
<label class="form-label">Type Date</label>
<div class="flex">
<span class="form-input-group input-icon bg-[#F8F8F8] dark:bg-dark-card !text-gray-900 dark:text-dark-text">
<i class="ri-calendar-line text-inherit"></i>
</span>
<input type="date" class="form-input rounded-l-none" required >
</div>
</div>
<div>
<label class="form-label">Time</label>
<div class="flex">
<span class="form-input-group input-icon bg-[#F8F8F8] dark:bg-dark-card !text-gray-900 dark:text-dark-text">
<i class="ri-time-line text-inherit"></i>
</span>
<input type="time" value="16:20" class="form-input rounded-l-none" required >
</div>
</div>
<div>
<label class="form-label">Type Email</label>
<div class="flex">
<span class="form-input-group input-icon bg-[#F8F8F8] dark:bg-dark-card !text-gray-900 dark:text-dark-text">
<i class="ri-mail-line text-inherit"></i>
</span>
<input type="email" class="form-input rounded-l-none" placeholder="example@gmail.com" required >
</div>
</div>
<div>
<label class="form-label">Type URL</label>
<div class="flex">
<span class="form-input-group input-icon bg-[#F8F8F8] dark:bg-dark-card !text-gray-900 dark:text-dark-text">
<i class="ri-links-fill text-inherit"></i>
</span>
<input type="url" class="form-input rounded-l-none" placeholder="http://example.com" required >
</div>
</div>