<!-- input text -->
<div class="hsdfdsfhsdf oskasdadiaa">
  <label for="input-id" class="mb-2">Name</label>
  <input id="input-id" type="text" name="" placeholder="Your name" class="w-full py-3 px-4 h-12 border border-black rounded focus:outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 bg-neutral-100 dark:bg-neutral-700 focus:shadow-[4px_4px_0_0_#000000] focus:ring-0" value="">
</div>

<!-- textarea -->
<div class="hsdfdsfhsdf oskasdadiaa">
  <label for="TextareaId" class="mb-2">Your Textarea</label>
  <div class="relative z-0">
    <textarea class="w-full py-3 px-4 border border-black rounded focus:outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 bg-neutral-100 dark:bg-neutral-700 focus:shadow-[4px_4px_0_0_#000000] focus:ring-0" placeholder="Description" id="TextareaId" name="yourTextareaName" rows="3"></textarea>
  </div>
</div>

<!-- input email -->
<div class="hsdfdsfhsdf oskasdadiaa">
  <label for="input-email" class="mb-2">Email</label>
  <input id="input-email" type="email" name="" placeholder="mail@domain.com" class="w-full py-3 px-4 h-12 border border-black rounded focus:outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 bg-neutral-100 dark:bg-neutral-700 focus:shadow-[4px_4px_0_0_#000000] focus:ring-0" value="">
</div>

<!-- input password -->
<div class="hsdfdsfhsdf oskasdadiaa">
  <label for="input-pass" class="mb-2">Password</label>
  <input id="input-pass" type="password" name="" placeholder="Password" class="w-full py-3 px-4 h-12 border border-black rounded focus:outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 bg-neutral-100 dark:bg-neutral-700 focus:shadow-[4px_4px_0_0_#000000] focus:ring-0" value="">
</div>

<!-- input url -->
<div class="hsdfdsfhsdf oskasdadiaa">
  <label for="input-url" class="mb-2">Domain Url</label>
  <input id="input-url" type="url" name="" placeholder="https://" class="w-full py-3 px-4 h-12 border border-black rounded focus:outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 bg-neutral-100 dark:bg-neutral-700 focus:shadow-[4px_4px_0_0_#000000] focus:ring-0" value="">
</div>

<!-- input telephone -->
<div class="hsdfdsfhsdf oskasdadiaa">
  <label for="input-tel" class="mb-2">Telephone</label>
  <input id="input-tel" type="tel" name="" placeholder="Phone number" class="w-full py-3 px-4 h-12 border border-black rounded focus:outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 bg-neutral-100 dark:bg-neutral-700 focus:shadow-[4px_4px_0_0_#000000] focus:ring-0" value="">
</div>

<!-- input date -->
<div class="hsdfdsfhsdf oskasdadiaa">
  <label for="input-date" class="mb-2">Date</label>
  <input id="input-date" type="date" name="" class="w-full py-3 px-4 h-12 border border-black rounded focus:outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 bg-neutral-100 dark:bg-neutral-700 focus:shadow-[4px_4px_0_0_#000000] focus:ring-0" value="">
</div>

<!-- input color -->
<div class="hsdfdsfhsdf oskasdadiaa">
  <label for="input-color" class="mb-2">Color</label>
  <input id="input-color" type="color" name="" class="w-10 h-10 px-0.5 border border-black rounded focus:outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 bg-neutral-100 dark:bg-neutral-700 focus:shadow-[4px_4px_0_0_#000000] focus:ring-0" value="">
</div>

<!-- input search -->
<div class="hsdfdsfhsdf oskasdadiaa">
  <label for="input-search" class="mb-2">Search</label>
  <input id="input-search" type="search" name="" placeholder="Search..." class="w-full py-3 px-4 h-12 border border-black rounded focus:outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 bg-neutral-100 dark:bg-neutral-700 focus:shadow-[4px_4px_0_0_#000000] focus:ring-0" value="">
</div>

<!-- input icon -->
<div class="hsdfdsfhsdf oskasdadiaa">
  <label for="input-icon" class="mb-2">Input with Icon</label>
  <div class="relative rounded">
    <input id="input-icon" type="text" name="" placeholder="Email address" class="w-full py-3 ps-16 pe-4 h-12 border border-black rounded focus:outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 bg-neutral-100 dark:bg-neutral-700 focus:shadow-[4px_4px_0_0_#000000] focus:ring-0 peer" value="">
    <!-- icon -->
    <span class="size-12 hsdfdsfhsdf justify-center pdskdmsdnjw raiytahskcn start-0 top-0 border rounded-s border-black bg-neutral-200 dark:bg-neutral-800 peer-focus:-translate-x-0.5 peer-focus:-translate-y-0.5">
      <span class="bi bi-envelope-fill text-lg"></span>
    </span>
  </div>
</div>
              
            

              
<!-- Default select -->
<div class="hsdfdsfhsdf oskasdadiaa">
  <label for="examplexs" class="mb-2">Default select</label>
  <select id="examplexs" class="w-full py-3 px-4 h-12 border border-black rounded focus:outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 bg-neutral-100 dark:bg-neutral-700 focus:shadow-[4px_4px_0_0_#000000] focus:ring-0" aria-label="Default select example">
    <option selected="">Select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<!-- Select option group -->
<div class="hsdfdsfhsdf oskasdadiaa">
  <label for="examplex" class="mb-2">Select group</label>
  <select id="examplex" class="w-full py-3 px-4 h-12 border border-black rounded focus:outline-none focus:-translate-x-0.5 focus:-translate-y-0.5 bg-neutral-100 dark:bg-neutral-700 focus:shadow-[4px_4px_0_0_#000000] focus:ring-0" aria-label="Default select example">
    <optgroup label="Swedish Cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="German Cars">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </optgroup>
  </select>
</div>