Input

<!-- ------------------------------- DEFAULT ------------------------------- -->
<!-- Input Wrapper -->
<div class="relative w-80"></div>
 
<!-- Input -->
<input
  class="peer flex h-10 w-full rounded-md border border-input-border bg-main px-3 py-2 text-sm placeholder:text-muted-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main"
  id="example-1"
  placeholder="Placeholder..." />
 
<!-- --------------------------- With Left Icon ---------------------------- -->
<!-- Left Icon Wrapper -->
<div class="absolute left-2 top-1/2 -translate-y-1/2 transform"></div>
 
<!-- Input -->
<input
  class="peer flex h-10 w-full rounded-md border border-input-border bg-main px-3 py-2 pl-8 text-sm placeholder:text-muted-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main"
  id="example-2"
  placeholder="Input..." />
 
<!-- --------------------------- With Right Icon --------------------------- -->
<!-- Input -->
<input
  class="peer flex h-10 w-full rounded-md border border-input-border bg-main px-3 py-2 pr-8 text-sm placeholder:text-muted-text focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-main"
  id="example-3"
  placeholder="Input..." />
 
<!-- Right Icon Wrapper -->
<div class="absolute right-3.5 top-1/2 -translate-y-1/2 transform"></div>