Input
<!-- input -->
<div class="flex oskasdadiaa mb-6">
<label for="input-id" class="text-sm mb-2 hidden">Enter your name</label>
<input id="input-id" type="text" name="" placeholder="Input text" class="w-full py-3 px-4 h-12 bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 rounded focus:outline-none shadow-inset-fixed" value="">
</div>
Input Password
<!-- input password -->
<div class="flex oskasdadiaa mb-6">
<label for="inputpassword" class="text-sm mb-2 hidden">Password</label>
<div class="relative z-0 [&.show_.off]:!block [&.show_.on]:!hidden">
<input type="password" aria-label="password" name="password" id="inputpassword" placeholder="input password" class="w-full py-3 px-4 h-12 bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 rounded focus:outline-none shadow-inset-fixed" value="">
<div title="Show or hide password" onclick="passwordFunc()" class="absolute inset-y-0 end-0 pe-3 flex pdskdmsdnjw text-xl leading-5 cursor-pointer">
<i class="bi bi-eye on"></i>
<i class="bi bi-eye-slash off hidden"></i>
</div>
</div>
</div>
<!-- show hide password -->
<script>
function passwordFunc() {
const x = document.getElementById("inputpassword");
const parent = x.parentNode;
if (x.type === "password") {
x.type = "text";
parent.classList.add("show");
} else {
x.type = "password";
parent.classList.remove("show");
}
}
</script>
Textarea
<!-- text area -->
<div class="flex oskasdadiaa mb-6">
<label for="yourTextareaId" class="text-sm mb-2 hidden">Textarea Label</label>
<div class="relative z-0">
<textarea class="w-full py-3 px-4 bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 rounded focus:outline-none shadow-inset-fixed" placeholder="Description" id="yourTextareaId" name="yourTextareaName" rows="3"></textarea>
</div>
</div>
Select
<!-- select -->
<div class="flex oskasdadiaa mb-6">
<label for="customSelect" class="text-sm mb-2 hidden">Select an option</label>
<select id="dropdownOptions" class="custom-select w-full py-3 px-4 h-12 bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 rounded focus:outline-none shadow-outset cursor-pointer">
<option value="" disabled selected>Select an option</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
</select>
</div>