N
eudash

Input

            
<!-- input -->
<div class="flex flex-col 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 flex-col 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 right-0 pr-3 flex items-center 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 flex-col 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 flex-col 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>

Input color

            
<!-- input color -->
<div class="relative">
  <label class="hidden" for="colorInput">Choose a color</label>
  <input type="color" class="w-8 h-8 rounded overflow-hidden bg-primary-100 border border-primary-200 dark:bg-primary-900 dark:border-primary-950 rounded shadow-outset-fixed" id="colorInput" name="colorInput" title="Choose a color" value="#ffffff">
</div>