Skip to content
Docs
💻 | Components
Form

Form Component

Form elements in a webpage are graphical elements that allow users to input and submit information. They include various types of fields, such as text input, dropdown menus, checkboxes, and radio buttons, and are often used to collect user data or preferences. Form elements can also include buttons to submit or reset the form, as well as validation messages to ensure the user enters the correct information.

Switch

1<div class="flex flex-col items-center justify-center gap-2 py-5">
2<label class="relative inline-flex cursor-pointer items-center">
3  <input type="checkbox" value="" class="peer sr-only" />
4  <div class="h-6 w-11 rounded-full border border-slate-900 bg-slate-900 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none"></div>
5  <span class="ml-3 select-none text-gray-600">Switch</span>
6</label>
7<label class="relative inline-flex cursor-pointer items-center">
8  <input type="checkbox" value="" class="peer sr-only" />
9  <div class="h-6 w-11 rounded-full border border-slate-900 after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-400 after:bg-white after:transition-all after:content-[''] peer-checked:bg-slate-900 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none"></div>
10  <span class="ml-3 select-none text-gray-600">Switch</span>
11</label>
12<label class="relative inline-flex cursor-pointer items-center">
13  <input type="checkbox" value="" class="peer sr-only" />
14  <div class="h-6 w-11 rounded-full bg-white after:absolute after:top-[2px] after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-slate-900 after:transition-all after:content-[''] peer-checked:bg-slate-900 peer-checked:after:translate-x-full peer-checked:after:border-white peer-checked:after:bg-white peer-focus:outline-none"></div>
15  <span class="ml-3 select-none text-gray-600">Switch</span>
16</label>
17<label class="relative inline-flex cursor-pointer items-center">
18  <input type="checkbox" value="" class="peer sr-only" />
19  <div class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:top-0.5 after:left-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-gray-100 after:transition-all after:content-[''] peer-checked:bg-slate-900 peer-checked:after:translate-x-full peer-checked:after:border-white"></div>
20  <span class="ml-3 select-none text-gray-600">Switch</span>
21</label>
22</div>

Checkbox

1<div class="flex flex-col items-center justify-center gap-2 py-5">
2<div class="flex items-center gap-2">
3  <label class="container relative mb-4 block w-fit cursor-pointer select-none pl-9 text-lg text-gray-500"
4    >Checkbox
5    <input checked type="checkbox" class="peer absolute left-0 top-0 h-6 w-6 cursor-pointer appearance-none rounded border border-gray-300 bg-slate-900 checked:bg-white" />
6    <span class="checkmark absolute left-0 top-0 h-2 w-2 after:absolute after:left-2.5 after:top-1.5 after:hidden after:h-3 after:w-1.5 after:rotate-45 after:border-b-[3px] after:border-r-[3px] after:border-solid after:border-slate-900 after:content-[''] checked:border-slate-900 peer-checked:after:block"></span>
7  </label>
8</div>
9
10<div class="flex items-center gap-2">
11  <label class="container relative mb-4 block w-fit cursor-pointer select-none pl-9 text-lg text-gray-500"
12    >Checkbox
13    <input type="checkbox" class="peer absolute left-0 top-0 h-6 w-6 cursor-pointer appearance-none rounded border border-slate-900 bg-white checked:bg-slate-900" />
14    <span class="checkmark absolute left-0 top-0 h-2 w-2 after:absolute after:left-2.5 after:top-1.5 after:hidden after:h-3 after:w-1.5 after:rotate-45 after:border-b-[3px] after:border-r-[3px] after:border-solid after:border-white after:content-[''] checked:border-slate-900 peer-checked:after:block"></span>
15  </label>
16</div>
17
18<div class="flex items-center gap-2">
19  <label class="container relative mb-4 block w-fit cursor-pointer select-none pl-9 text-lg text-gray-500"
20    >Checkbox
21    <input checked type="checkbox" class="peer absolute left-0 top-0 h-6 w-6 cursor-pointer appearance-none rounded border border-white bg-white checked:bg-slate-900" />
22    <span class="checkmark absolute left-0 top-0 h-2 w-2 after:absolute after:left-2.5 after:top-1.5 after:hidden after:h-3 after:w-1.5 after:rotate-45 after:border-b-[3px] after:border-r-[3px] after:border-solid after:border-white after:content-[''] checked:border-white peer-checked:after:block"></span>
23  </label>
24</div>
25
26<div class="flex items-center gap-2">
27  <label class="container relative mb-4 block w-fit cursor-not-allowed select-none pl-9 text-lg text-gray-500"
28    >Checkbox
29    <input type="checkbox" class="peer absolute left-0 top-0 h-6 w-6 cursor-not-allowed appearance-none rounded border border-gray-300 bg-gray-300" />
30  </label>
31</div>
32</div>

Choose File Rounded

1<div class="grid gap-5 p-5">
2<!-- small -->
3<div class="w-full">
4  <div class="relative flex w-full">
5    <div class="absolute inset-y-0 flex items-center pl-5">
6      <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="15" height="15" viewBox="0 0 24 24">
7        <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />
8      </svg>
9    </div>
10    <input type="file" id="file_input" class="w-full cursor-pointer rounded-full border-2 border-gray-900 bg-gray-900 p-2 pl-10 text-sm text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />
11  </div>
12</div>
13
14<!-- medium -->
15<div class="w-full">
16  <div class="relative flex w-full">
17    <div class="absolute inset-y-0 flex items-center pl-5">
18      <svg xmlns="http://www.w3.org/2000/svg" width="15" fill="#ffffff" height="15" viewBox="0 0 24 24">
19        <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />
20      </svg>
21    </div>
22    <input type="file" id="file_input" class="text-md w-full cursor-pointer rounded-full border-2 border-gray-900 bg-gray-900 p-3 pl-10 text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />
23  </div>
24</div>
25
26<!-- large -->
27<div class="w-full">
28  <div class="relative flex w-full">
29    <div class="absolute inset-y-0 flex items-center pl-5">
30      <svg xmlns="http://www.w3.org/2000/svg" width="15" fill="#ffffff" height="15" viewBox="0 0 24 24">
31        <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />
32      </svg>
33    </div>
34    <input type="file" id="file_input" class="text-gl w-full cursor-pointer rounded-full border-2 border-gray-900 bg-gray-900 p-5 pl-10 text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />
35  </div>
36</div>
37</div>

Choose File Boxed

1<div class="grid gap-5 p-5">
2<!-- small -->
3<div class="w-full">
4  <div class="relative flex w-full">
5    <div class="absolute inset-y-0 flex cursor-pointer items-center pl-5">
6      <svg xmlns="http://www.w3.org/2000/svg" fill="#ffffff" width="15" height="15" viewBox="0 0 24 24">
7        <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />
8      </svg>
9    </div>
10    <input type="file" id="file_input" class="w-full cursor-pointer rounded-md border-2 border-gray-900 bg-gray-900 p-2 pl-10 text-sm text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />
11  </div>
12</div>
13
14<!-- medium -->
15<div class="w-full">
16  <div class="relative flex w-full">
17    <div class="absolute inset-y-0 flex cursor-pointer items-center pl-5">
18      <svg xmlns="http://www.w3.org/2000/svg" width="15" fill="#ffffff" height="15" viewBox="0 0 24 24">
19        <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />
20      </svg>
21    </div>
22    <input type="file" id="file_input" class="text-md w-full cursor-pointer rounded-md border-2 border-gray-900 bg-gray-900 p-3 pl-10 text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />
23  </div>
24</div>
25
26<!-- large -->
27<div class="w-full">
28  <div class="relative flex w-full">
29    <div class="absolute inset-y-0 flex cursor-pointer items-center pl-5">
30      <svg xmlns="http://www.w3.org/2000/svg" width="15" fill="#ffffff" height="15" viewBox="0 0 24 24">
31        <path d="M16.949 7.051c.39.389.391 1.022.001 1.413l-8.485 8.486c-.392.391-1.023.391-1.414 0-.39-.39-.39-1.021.001-1.412l8.485-8.488c.39-.39 1.024-.387 1.412.001zm-5.805 10.043c-.164.754-.541 1.486-1.146 2.088l-1.66 1.66c-1.555 1.559-3.986 1.663-5.413.235-1.429-1.428-1.323-3.857.234-5.413l1.661-1.663c.603-.601 1.334-.98 2.087-1.144l1.934-1.934c-1.817-.306-3.829.295-5.313 1.783l-1.662 1.661c-2.342 2.34-2.5 5.978-.354 8.123 2.145 2.146 5.783 1.985 8.123-.354l1.66-1.66c1.486-1.487 2.089-3.496 1.783-5.314l-1.934 1.932zm3.222-15.231l-1.66 1.66c-1.486 1.488-2.089 3.499-1.783 5.317l1.935-1.935c.162-.753.54-1.485 1.146-2.087l1.66-1.66c1.556-1.559 3.984-1.663 5.413-.234 1.429 1.427 1.324 3.857-.233 5.415l-1.66 1.66c-.602.603-1.334.981-2.089 1.145l-1.934 1.934c1.818.306 3.827-.295 5.317-1.783l1.658-1.662c2.34-2.339 2.498-5.976.354-8.121-2.145-2.146-5.78-1.987-8.124.351z" />
32      </svg>
33    </div>
34    <input type="file" id="file_input" class="text-gl w-full cursor-pointer rounded-lg border-2 border-gray-900 bg-gray-900 p-5 pl-10 text-gray-100 file:border-none file:bg-gray-900 file:text-white focus:border-blue-500 focus:ring-blue-500" placeholder="Search" required />
35  </div>
36</div>
37</div>
38

Email Input Rounded

1<div class="grid gap-5 p-5">
2<!-- small -->
3<input type="email" class="w-full rounded-full bg-slate-900 p-2 pl-5 text-sm text-normal text-white placeholder-gray-400 outline-none focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300" placeholder="Email *" />
4
5<!-- medium -->
6<input type="email" class="text-md w-full rounded-full bg-slate-900 p-3 pl-6 text-white placeholder-gray-400 outline-none focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300" placeholder="Email *" />
7
8<!-- large -->
9<input type="email" class="w-full rounded-full bg-slate-900 p-5 pl-8 text-lg text-white placeholder-gray-400 outline-none focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300" placeholder="Email *" />
10</div>

Email Input Boxed

1<div class="grid gap-5 p-5">
2<!-- small -->
3<input type="email" class="w-full rounded-lg bg-slate-900 p-2 pl-5 text-sm text-normal text-white placeholder-gray-400 outline-none focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300" placeholder="Email *" />
4
5<!-- medium -->
6<input type="email" class="text-md w-full rounded-lg bg-slate-900 p-3 pl-6 text-white placeholder-gray-400 outline-none focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300" placeholder="Email *" />
7
8<!-- large -->
9<input type="email" class="w-full rounded-lg bg-slate-900 p-5 pl-8 text-lg text-white placeholder-gray-400 outline-none focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300" placeholder="Email *" />
10</div>

Error

1<div class="grid gap-5 p-5">
2<!-- small -->
3<input type="text" class="w-full rounded-md border-2 border-red-500 bg-gray-900 p-2 text-sm outline-none" placeholder="Error" />
4
5<!-- medium -->
6<input type="text" class="text-md w-full rounded-md border-2 border-red-500 bg-gray-900 p-3 outline-none" placeholder="Error" />
7
8<!-- large -->
9<input type="text" class="w-full rounded-md border-2 border-red-500 bg-gray-900 p-5 text-lg outline-none" placeholder="Error" />
10</div>

Error Rounded

1<div class="grid gap-5 p-5">
2<!-- small -->
3<input type="text" class="w-full rounded-full border-2 border-red-500 bg-gray-900 p-2 text-sm outline-none" placeholder="Error" />
4
5<!-- medium -->
6<input type="text" class="text-md w-full rounded-full border-2 border-red-500 bg-gray-900 p-3 outline-none" placeholder="Error" />
7
8<!-- large -->
9<input type="text" class="w-full rounded-full border-2 border-red-500 bg-gray-900 p-5 text-lg outline-none" placeholder="Error" />
10</div>

Success

1<div class="grid gap-5 p-5">
2<!-- small -->
3<input type="text" class="w-full rounded-md border-2 border-green-500 bg-gray-900 p-2 text-sm outline-none" placeholder="Error" />
4
5<!-- medium -->
6<input type="text" class="text-md w-full rounded-md border-2 border-green-500 bg-gray-900 p-3 outline-none" placeholder="Error" />
7
8<!-- large -->
9<input type="text" class="w-full rounded-md border-2 border-green-500 bg-gray-900 p-5 text-lg outline-none" placeholder="Error" />
10</div>

Success Rounded

1<div class="grid gap-5 p-5">
2<!-- small -->
3<input type="text" class="w-full rounded-full border-2 border-green-500 bg-gray-900 p-2 text-sm outline-none" placeholder="Error" />
4
5<!-- medium -->
6<input type="text" class="text-md w-full rounded-full border-2 border-green-500 bg-gray-900 p-3 outline-none" placeholder="Error" />
7
8<!-- large -->
9<input type="text" class="w-full rounded-full border-2 border-green-500 bg-gray-900 p-5 text-lg outline-none" placeholder="Error" />
10</div>

Textarea

1<div class="my-0 max-w-[900px] p-5">
2<textarea name="message" id="" cols="50" rows="4" placeholder="Message" class="w-[100%] max-w-[500px] resize-none rounded bg-slate-900 p-7 text-xl tracking-wide text-white"></textarea>
3</div>

Textarea Rounded

1<div class="mx-auto my-0 max-w-[900px] p-5">
2<textarea name="message" id="" cols="50" rows="4" placeholder="Message" class="w-[100%] max-w-[500px] resize-none rounded-2xl bg-slate-900 p-6 text-xl tracking-wide text-white placeholder:text-xl placeholder:text-white"></textarea>
3</div>

Search

1<!-- small -->
2<div class="relative mb-6">
3  <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6">
4    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
5      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z" fill="gray" />
6    </svg>
7  </div>
8  <input type="text" class="w-full rounded-md border-2 border-gray-900 bg-gray-900 px-72 py-2 pl-16 text-base text-white placeholder-gray-400 focus:border-gray-400" placeholder="Search" />
9</div>
10
11<!-- Large -->
12<div class="relative mb-6">
13  <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6">
14    <svg width="18" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
15      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z" fill="gray" />
16    </svg>
17  </div>
18  <input type="text" class="w-full rounded-md border-2 border-gray-900 bg-gray-900 px-72 py-4 pl-16 text-lg text-white placeholder-gray-400 focus:border-gray-600" placeholder="Search" />
19</div>

Search Rounded

1<!-- small -->
2<div class="relative mb-6">
3  <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6">
4    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
5      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z" fill="gray" />
6    </svg>
7  </div>
8  <input type="text" class="w-full rounded-full border-2 border-gray-900 bg-gray-900 px-72 py-2 pl-16 text-base text-white placeholder-gray-400 focus:border-gray-400" placeholder="Search" />
9</div>
10
11<!-- Large -->
12<div class="relative mb-6">
13  <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-6">
14    <svg width="18" height="20" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
15      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.4601 10.3188L15.7639 14.6226C15.9151 14.7739 16.0001 14.9792 16 15.1932C15.9999 15.4072 15.9148 15.6124 15.7635 15.7637C15.6121 15.915 15.4068 15.9999 15.1928 15.9998C14.9788 15.9998 14.7736 15.9147 14.6223 15.7633L10.3185 11.4595C9.03194 12.456 7.41407 12.9249 5.79403 12.7709C4.17398 12.6169 2.67346 11.8515 1.59771 10.6304C0.521957 9.40936 -0.0482098 7.82433 0.00319691 6.19779C0.0546036 4.57125 0.723722 3.02539 1.87443 1.87468C3.02514 0.723966 4.57101 0.0548478 6.19754 0.00344105C7.82408 -0.0479657 9.40911 0.522201 10.6302 1.59795C11.8513 2.6737 12.6167 4.17423 12.7707 5.79427C12.9247 7.41432 12.4558 9.03219 11.4593 10.3188H11.4601ZM6.4003 11.1995C7.67328 11.1995 8.89412 10.6938 9.79425 9.7937C10.6944 8.89356 11.2001 7.67272 11.2001 6.39974C11.2001 5.12676 10.6944 3.90592 9.79425 3.00579C8.89412 2.10565 7.67328 1.59997 6.4003 1.59997C5.12732 1.59997 3.90648 2.10565 3.00634 3.00579C2.10621 3.90592 1.60052 5.12676 1.60052 6.39974C1.60052 7.67272 2.10621 8.89356 3.00634 9.7937C3.90648 10.6938 5.12732 11.1995 6.4003 11.1995V11.1995Z" fill="gray" />
16    </svg>
17  </div>
18  <input type="text" class="w-full rounded-full border-2 border-gray-900 bg-gray-900 px-72 py-4 pl-16 text-lg text-white placeholder-gray-400 focus:border-gray-600" placeholder="Search" />
19</div>

Select

1<div class="grid gap-5 p-5">
2<!-- small -->
3<div class="relative">
4  <select class="block w-full appearance-none rounded-md border-2 border-gray-200 bg-slate-900 p-2 text-sm text-slate-100 outline-none focus:border-blue-600 disabled:bg-gray-300">
5    <option selected>Select</option>
6    <option>Tailwind</option>
7    <option>React</option>
8    <option>SeamLess UI</option>
9    <option>Input</option>
10  </select>
11  <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6">
12    <svg class="h-5 w-5 fill-slate-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
13      <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />
14    </svg>
15  </div>
16</div>
17
18<!-- medium -->
19<div class="relative">
20  <select class="text-md block w-full appearance-none rounded-md border-2 border-gray-200 bg-slate-900 p-3 text-slate-100 outline-none focus:border-blue-600 disabled:bg-gray-300">
21    <option selected>Select</option>
22    <option>Tailwind</option>
23    <option>React</option>
24    <option>SeamLess UI</option>
25    <option>Input</option>
26  </select>
27  <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6">
28    <svg class="h-5 w-5 fill-slate-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
29      <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />
30    </svg>
31  </div>
32</div>
33
34<!-- large -->
35<div class="relative">
36  <select class="block w-full appearance-none rounded-md border-2 border-gray-200 bg-slate-900 p-5 text-lg text-slate-100 outline-none focus:border-blue-600 disabled:bg-gray-300">
37    <option selected>Select</option>
38    <option>Tailwind</option>
39    <option>React</option>
40    <option>SeamLess UI</option>
41    <option>Input</option>
42  </select>
43  <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6">
44    <svg class="h-5 w-5 fill-slate-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
45      <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />
46    </svg>
47  </div>
48</div>
49</div>

Select Rounded

1<div class="grid gap-5 p-5">
2<!-- small -->
3<div class="relative">
4  <select class="block w-full appearance-none rounded-full border-2 border-gray-200 bg-slate-900 p-2 pl-5 text-sm text-slate-100 outline-none focus:border-blue-600 disabled:bg-gray-300">
5    <option selected>Select</option>
6    <option>Tailwind</option>
7    <option>React</option>
8    <option>SeamLess UI</option>
9    <option>Input</option>
10  </select>
11  <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-5">
12    <svg class="h-5 w-5 fill-slate-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
13      <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />
14    </svg>
15  </div>
16</div>
17
18<!-- medium -->
19<div class="relative">
20  <select class="text-md block w-full appearance-none rounded-full border-2 border-gray-200 bg-slate-900 p-3 pl-5 text-slate-100 outline-none focus:border-blue-600 disabled:bg-gray-300">
21    <option selected>Select</option>
22    <option>Tailwind</option>
23    <option>React</option>
24    <option>SeamLess UI</option>
25    <option>Input</option>
26  </select>
27  <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-6">
28    <svg class="h-5 w-5 fill-slate-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
29      <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />
30    </svg>
31  </div>
32</div>
33
34<!-- large -->
35<div class="relative">
36  <select class="block w-full appearance-none rounded-full border-2 border-gray-200 bg-slate-900 p-5 pl-8 text-lg text-slate-100 outline-none focus:border-blue-600 disabled:bg-gray-300">
37    <option selected>Select</option>
38    <option>Tailwind</option>
39    <option>React</option>
40    <option>SeamLess UI</option>
41    <option>Input</option>
42  </select>
43  <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 pr-7">
44    <svg class="h-5 w-5 fill-slate-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
45      <path d="M10 12l-5-5 1.41-1.41L10 9.17l3.59-3.58L15 7l-5 5z" />
46    </svg>
47  </div>
48</div>
49</div>
Feature CardsPricing Cards