# Form group Design System ⭐

Form Group can be wrapped around components used in a Form, such as Input or Radio. Form Group has three sizes — large, medium and small. The size controls the spacing between the groups. Form Text should be used to display informational text that helps the user with data entry.

![Screenshot 2022-11-10 at 12 23 10 AM](https://i.postimg.cc/NMLHbs5c/Screenshot-2022-12-31-at-4-28-10-PM.png)

## General convention to follow :


### Color 🎨

|  | Background | Border | Active | Inactive |
| --- | --- | --- | --- | --- |
| Color Code in Tailwind | bg-gray-100 | border-gray-200 | bg-green-400 | bg-red-400 | bg slate-900 | bg-gray-400 |
 


 
|  | Background | Background |

| --- | --- | --- | 
| Color Code in Tailwind | bg-gray-100 |bg-white| bg-gray-300 | 
 

Color of `text` will depend on the `bg` color
| Background | Dark | Light |
| --- | --- | --- |
| Text | Light | Dark |
| Code in Tailwind | text-white | text-gray-200 | text-slate-600| text-black | text-gray-800 | text-gray-500 |

`Note` : Color of the text `[color]` will depend on the color of the background

### **Border-radius** :

| small | medium | large |
| --- | --- | --- |
| rounded-md | rounded-lg | rounded-xl |

### **Border :**

- border thickness : `border-2`
- border color : `border-gray-200`
- border focus color : `focus:border-blue-600`


### **Paddings :**

| small | medium | large |
| --- | --- | --- |
| p-2 | p-3 | p-5 |

### Font :

| small | medium | large |
| --- | --- | --- |
| text-sm | text-md | text-lg | 

### Width :

With is always set to full `w-full` so that the user can use the external div to control the width of the input box easily.

---

### Disabled State :

In the disabled state we use a background color with `bg-gray-300`

### Buttons :

We need to use the already built buttons for this. **[Buttons](https://github.com/Clueless-Community/seamless-ui/tree/main/Buttons)** 🔗 . Don’t use any buttons outside this.

### Icons :

Icons must be used from **[Heroicons](https://heroicons.com/)** 🖇️

**Note :** You need to use a solid 24X24 SVG form heroicons.

## Example Code :

This is the example code of the `email.html`

```html
<!-- Choose category -->

<!-- small -->
<form class="p-4">
  <h1 class="mb-3 text-xl font-medium text-gray-900">Categories*</h1>
  <div>
    <select id="Categories"
      class="text-gray h-full w-full cursor-pointer rounded-md border-2 border-gray-200 bg-gray-100 p-2 text-base text-gray-600 outline-none transition-all hover:bg-gray-200">
      <option selected>Category</option>
      <option value="01">First</option>
      <option value="02">Second</option>
      <option value="03">Third</option>
      <option value="04">Fourth</option>
    </select>
  </div>
  <label class="font-semi-bold text-xs text-gray-500"> Choose from the list.</label>
</form>

<!-- medium -->
<form class="p-4">
  <h1 class="mb-3 text-xl font-medium text-gray-900">Categories*</h1>
  <div>
    <select id="Categories"
      class="text-gray h-full w-full cursor-pointer rounded-md border-2 border-gray-200 bg-gray-100 p-3 text-gray-600 outline-none transition-all hover:bg-gray-200">
      <option selected>Category</option>
      <option value="01">First</option>
      <option value="02">Second</option>
      <option value="03">Third</option>
      <option value="04">Fourth</option>
    </select>
  </div>
  <label class="font-semi-bold text-sm text-gray-500"> Choose from the list.</label>
</form>

<!-- large -->
<form class="p-4">
  <h1 class="mb-3 text-xl font-medium text-gray-900">Categories*</h1>
  <div>
    <select id="Categories"
      class="text-gray h-full w-full cursor-pointer rounded-lg border-2 border-gray-200 bg-gray-100 p-5 text-lg text-gray-600 outline-none transition-all hover:bg-gray-200">
      <option selected>Category</option>
      <option value="01">First</option>
      <option value="02">Second</option>
      <option value="03">Third</option>
      <option value="04">Fourth</option>
    </select>
  </div>
  <label class="font-semi-bold text-base text-gray-500"> Choose from the list.</label>
</form>

<!-- Choose file with button -->
<!-- small -->

<form class="p-4">
  <h1 class="text-md mb-3 font-medium text-gray-800">Upload *</h1>
  <div class="relative flex w-full">
    <div class="absolute inset-y-0 flex items-center pl-3">
      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24">
        <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" />
      </svg>
    </div>
    <input type="file" id="file_input"
      class="w-full rounded-l-lg border-2 border-gray-200 bg-gray-100 p-2 pl-8 text-sm text-gray-600 file:border-none file:bg-gray-100 focus:border-blue-500 focus:ring-blue-500"
      placeholder="Search" required />
    <button
      class="rounded-r-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-all hover:bg-blue-700 disabled:bg-gray-400">Go</button>
  </div>
  <label for="email" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>

<!-- medium -->

<form class="p-4">
  <h1 class="text-md mb-3 font-medium text-gray-800">Upload *</h1>
  <div class="relative flex w-full">
    <div class="absolute inset-y-0 flex items-center pl-3">
      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24">
        <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" />
      </svg>
    </div>
    <input type="file" id="file_input"
      class="text-md w-full rounded-l-lg border-2 border-gray-200 bg-gray-100 p-3 pl-8 text-gray-600 file:border-none file:bg-gray-100 focus:border-blue-500 focus:ring-blue-500"
      placeholder="Search" required />
    <button
      class="text-md rounded-r-md bg-blue-600 px-6 py-3 font-medium text-white transition-all hover:bg-blue-700 disabled:bg-gray-400">Go</button>
  </div>
  <label for="email" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>

<!-- large -->

<form class="p-4">
  <h1 class="text-md mb-3 font-medium text-gray-800">Upload *</h1>
  <div class="relative flex w-full">
    <div class="absolute inset-y-0 flex items-center pl-3">
      <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24">
        <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" />
      </svg>
    </div>
    <input type="file" id="file_input"
      class="text-gl w-full rounded-l-lg border-2 border-gray-200 bg-gray-100 p-5 pl-8 text-gray-600 file:border-none file:bg-gray-100 focus:border-blue-500 focus:ring-blue-500"
      placeholder="Search" required />
    <button
      class="rounded-r-lg bg-blue-600 px-8 py-4 text-lg font-medium text-white transition-all hover:bg-blue-700 disabled:bg-gray-400">Go</button>
  </div>
  <label for="email" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>
<!-- contact us info -->
<!-- Container for demo purpose -->
<div class="container my-24 px-6 mx-auto">

  <!-- Section: Design Block -->
  <section class="mb-32 text-gray-800">
    <div class="flex justify-center">
      <div class="text-center lg:max-w-3xl md:max-w-xl">
        <h2 class="text-3xl font-bold mb-12 px-6">Contact us</h2>
      </div>
    </div>

    <div class="flex flex-wrap">
      <div class="grow-0 shrink-0 basis-auto mb-12 lg:mb-0 w-full lg:w-5/12 px-3 lg:px-6">
        <form>
          <div class="form-group mb-6">
            <input type="text" class="form-control block
            w-full
            px-3
            py-1.5
            text-base
            font-normal
            text-gray-700
            bg-white bg-clip-padding
            border border-solid border-gray-300
            rounded
            transition
            ease-in-out
            m-0
            focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput7"
              placeholder="Name">
          </div>
          <div class="form-group mb-6">
            <input type="email" class="form-control block
            w-full
            px-3
            py-1.5
            text-base
            font-normal
            text-gray-700
            bg-white bg-clip-padding
            border border-solid border-gray-300
            rounded
            transition
            ease-in-out
            m-0
            focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput8"
              placeholder="Email address">
          </div>
          <div class="form-group mb-6">
            <textarea class="
            form-control
            block
            w-full
            px-3
            py-1.5
            text-base
            font-normal
            text-gray-700
            bg-white bg-clip-padding
            border border-solid border-gray-300
            rounded
            transition
            ease-in-out
            m-0
            focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none
          " id="exampleFormControlTextarea13" rows="3" placeholder="Message"></textarea>
          </div>
          <div class="form-group form-check text-center mb-6">
            <input type="checkbox"
              class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain mr-2 cursor-pointer"
              id="exampleCheck87" checked>
            <label class="form-check-label inline-block text-gray-800" for="exampleCheck87">Send me a copy of this
              message</label>
          </div>
          <button type="submit" class="
          w-full
          px-6
          py-2.5
          bg-blue-600
          text-white
          font-medium
          text-xs
          leading-tight
          uppercase
          rounded
          shadow-md
          hover:bg-blue-700 hover:shadow-lg
          focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
          active:bg-blue-800 active:shadow-lg
          transition
          duration-150
          ease-in-out">Send</button>
        </form>
      </div>
      <div class="grow-0 shrink-0 basis-auto w-full lg:w-7/12">
        <div class="flex flex-wrap">
          <div class="mb-12 grow-0 shrink-0 basis-auto w-full lg:w-6/12 px-3 lg:px-6">
            <div class="flex items-start">
              <div class="shrink-0">
                <div class="p-4 bg-blue-600 rounded-md shadow-md w-14 h-14 flex items-center justify-center">
                  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="headset" class="w-5 text-white"
                    role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path fill="currentColor"
                      d="M192 208c0-17.67-14.33-32-32-32h-16c-35.35 0-64 28.65-64 64v48c0 35.35 28.65 64 64 64h16c17.67 0 32-14.33 32-32V208zm176 144c35.35 0 64-28.65 64-64v-48c0-35.35-28.65-64-64-64h-16c-17.67 0-32 14.33-32 32v112c0 17.67 14.33 32 32 32h16zM256 0C113.18 0 4.58 118.83 0 256v16c0 8.84 7.16 16 16 16h16c8.84 0 16-7.16 16-16v-16c0-114.69 93.31-208 208-208s208 93.31 208 208h-.12c.08 2.43.12 165.72.12 165.72 0 23.35-18.93 42.28-42.28 42.28H320c0-26.51-21.49-48-48-48h-32c-26.51 0-48 21.49-48 48s21.49 48 48 48h181.72c49.86 0 90.28-40.42 90.28-90.28V256C507.42 118.83 398.82 0 256 0z">
                    </path>
                  </svg>
                </div>
              </div>
              <div class="grow ml-6">
                <p class="font-bold mb-1">Technical support</p>
                <p class="text-gray-500">support@example.com</p>
                <p class="text-gray-500">+1 234-567-89</p>
              </div>
            </div>
          </div>
          <div class="mb-12 grow-0 shrink-0 basis-auto w-full lg:w-6/12 px-3 lg:px-6">
            <div class="flex items-start">
              <div class="shrink-0">
                <div class="p-4 bg-blue-600 rounded-md shadow-md w-14 h-14 flex items-center justify-center">
                  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="dollar-sign"
                    class="w-3 text-white" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 512">
                    <path fill="currentColor"
                      d="M209.2 233.4l-108-31.6C88.7 198.2 80 186.5 80 173.5c0-16.3 13.2-29.5 29.5-29.5h66.3c12.2 0 24.2 3.7 34.2 10.5 6.1 4.1 14.3 3.1 19.5-2l34.8-34c7.1-6.9 6.1-18.4-1.8-24.5C238 74.8 207.4 64.1 176 64V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48h-2.5C45.8 64-5.4 118.7.5 183.6c4.2 46.1 39.4 83.6 83.8 96.6l102.5 30c12.5 3.7 21.2 15.3 21.2 28.3 0 16.3-13.2 29.5-29.5 29.5h-66.3C100 368 88 364.3 78 357.5c-6.1-4.1-14.3-3.1-19.5 2l-34.8 34c-7.1 6.9-6.1 18.4 1.8 24.5 24.5 19.2 55.1 29.9 86.5 30v48c0 8.8 7.2 16 16 16h32c8.8 0 16-7.2 16-16v-48.2c46.6-.9 90.3-28.6 105.7-72.7 21.5-61.6-14.6-124.8-72.5-141.7z">
                    </path>
                  </svg>
                </div>
              </div>
              <div class="grow ml-6">
                <p class="font-bold mb-1">Sales questions</p>
                <p class="text-gray-500">sales@example.com</p>
                <p class="text-gray-500">+1 234-567-89</p>
              </div>
            </div>
          </div>
          <div class="mb-12 grow-0 shrink-0 basis-auto w-full lg:w-6/12 px-3 lg:px-6">
            <div class="flex align-start">
              <div class="shrink-0">
                <div class="p-4 bg-blue-600 rounded-md shadow-md w-14 h-14 flex items-center justify-center">
                  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="newspaper"
                    class="w-5 text-white" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
                    <path fill="currentColor"
                      d="M552 64H88c-13.255 0-24 10.745-24 24v8H24c-13.255 0-24 10.745-24 24v272c0 30.928 25.072 56 56 56h472c26.51 0 48-21.49 48-48V88c0-13.255-10.745-24-24-24zM56 400a8 8 0 0 1-8-8V144h16v248a8 8 0 0 1-8 8zm236-16H140c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm208 0H348c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm-208-96H140c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm208 0H348c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h152c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12zm0-96H140c-6.627 0-12-5.373-12-12v-40c0-6.627 5.373-12 12-12h360c6.627 0 12 5.373 12 12v40c0 6.627-5.373 12-12 12z">
                    </path>
                  </svg>
                </div>
              </div>
              <div class="grow ml-6">
                <p class="font-bold mb-1">Press</p>
                <p class="text-gray-500">press@example.com</p>
                <p class="text-gray-500">+1 234-567-89</p>
              </div>
            </div>
          </div>
          <div class="mb-12 grow-0 shrink-0 basis-auto w-full lg:w-6/12 px-3 lg:px-6">
            <div class="flex align-start">
              <div class="shrink-0">
                <div class="p-4 bg-blue-600 rounded-md shadow-md w-14 h-14 flex items-center justify-center">
                  <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bug" class="w-5 text-white"
                    role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path fill="currentColor"
                      d="M511.988 288.9c-.478 17.43-15.217 31.1-32.653 31.1H424v16c0 21.864-4.882 42.584-13.6 61.145l60.228 60.228c12.496 12.497 12.496 32.758 0 45.255-12.498 12.497-32.759 12.496-45.256 0l-54.736-54.736C345.886 467.965 314.351 480 280 480V236c0-6.627-5.373-12-12-12h-24c-6.627 0-12 5.373-12 12v244c-34.351 0-65.886-12.035-90.636-32.108l-54.736 54.736c-12.498 12.497-32.759 12.496-45.256 0-12.496-12.497-12.496-32.758 0-45.255l60.228-60.228C92.882 378.584 88 357.864 88 336v-16H32.666C15.23 320 .491 306.33.013 288.9-.484 270.816 14.028 256 32 256h56v-58.745l-46.628-46.628c-12.496-12.497-12.496-32.758 0-45.255 12.498-12.497 32.758-12.497 45.256 0L141.255 160h229.489l54.627-54.627c12.498-12.497 32.758-12.497 45.256 0 12.496 12.497 12.496 32.758 0 45.255L424 197.255V256h56c17.972 0 32.484 14.816 31.988 32.9zM257 0c-61.856 0-112 50.144-112 112h224C369 50.144 318.856 0 257 0z">
                    </path>
                  </svg>
                </div>
              </div>
              <div class="grow ml-6">
                <p class="font-bold mb-1">Bug report</p>
                <p class="text-gray-500">bugs@example.com</p>
                <p class="text-gray-500">+1 234-567-89</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Section: Design Block -->

</div>

<!-- contact us map -->
<!-- Container for demo purpose -->
<div class="container my-24 px-6 mx-auto">

  <!-- Section: Design Block -->
  <section class="mb-32 text-gray-800 text-center">
    <style>
      .map-container {
        height: 700px;
        z-index: -1;
      }
    </style>
    <div class="px-6 py-12 md:px-12">
      <div class="container mx-auto xl:px-32">
        <div class="grid lg:grid-cols-2 flex items-center">
          <div class="md:mt-12 lg:mt-0 mb-12 lg:mb-0">
            <div
              class="block rounded-lg shadow-lg px-6 py-12 md:px-12 lg:-mr-14"
              style="background: hsla(0, 0%, 100%, 0.55); backdrop-filter: blur(30px)"
            >
            <h2 class="text-3xl font-bold mb-12">Contact us</h2>
            <form>
              <div class="form-group mb-6">
                <input
                  type="text"
                  class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
                  id="exampleInput7"
                  placeholder="Name"
                />
              </div>
              <div class="form-group mb-6">
                <input
                  type="email"
                  class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
                  id="exampleInput8"
                  placeholder="Email address"
                />
              </div>
              <div class="form-group mb-6">
                <textarea
                  class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
                  id="exampleFormControlTextarea13"
                  rows="3"
                  placeholder="Message"
                ></textarea>
              </div>
              <div class="form-group form-check text-center mb-6">
                <input
                  type="checkbox"
                  class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain mr-2 cursor-pointer"
                  id="exampleCheck87"
                  checked
                />
                <label class="form-check-label inline-block text-gray-800" for="exampleCheck87"
                  >Send me a copy of this message</label
                >
              </div>
              <button
                type="submit"
                class="w-full px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out"
              >
                Send
              </button>
            </form>
            </div>
          </div>
          <div class="md:mb-12 lg:mb-0">
            <div class="map-container relative shadow-lg rounded-lg">
              <iframe src="https://maps.google.com/maps?q=manhatan&t=&z=13&ie=UTF8&iwloc=&output=embed" class="left-0 top-0 h-full w-full absolute rounded-lg" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- Section: Design Block -->

</div>
<!-- Container for demo purpose -->

<!-- contact us  -->
<!-- Container for demo purpose -->
<div class="container my-24 px-6 mx-auto">

  <!-- Section: Design Block -->
  <section class="mb-32 text-center text-gray-800">
    <div class="max-w-[700px] mx-auto px-3 lg:px-6">
      <h2 class="text-3xl font-bold mb-12">Contact us</h2>
      <form>
        <div class="form-group mb-6">
          <input type="text" class="form-control block
            w-full
            px-3
            py-1.5
            text-base
            font-normal
            text-gray-900
            bg-white bg-clip-padding
            border border-solid border-gray-300
            rounded
            transition
            ease-in-out
            m-0
            focus:text-gray-900 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput7"
            placeholder="Name">
        </div>
        <div class="form-group mb-6">
          <input type="email" class="form-control block
            w-full
            px-3
            py-1.5
            text-base
            font-normal
            text-gray-900
            bg-white bg-clip-padding
            border border-solid border-gray-300
            rounded
            transition
            ease-in-out
            m-0
            focus:text-gray-900 focus:bg-white focus:border-blue-600 focus:outline-none" id="exampleInput8"
            placeholder="Email address">
        </div>
        <div class="form-group mb-6">
          <textarea class="
            form-control
            block
            w-full
            px-3
            py-1.5
            text-base
            font-normal
            text-gray-900
            bg-white bg-clip-padding
            border border-solid border-gray-300
            rounded
            transition
            ease-in-out
            m-0
            focus:text-gray-900 focus:bg-white focus:border-blue-600 focus:outline-none
          " id="exampleFormControlTextarea13" rows="3" placeholder="Message"></textarea>
        </div>
        <div class="form-group form-check text-center mb-6">
          <input type="checkbox"
            class="form-check-input appearance-none h-4 w-4 border border-gray-300 rounded-sm bg-white checked:bg-blue-600 checked:border-blue-600 focus:outline-none transition duration-200 mt-1 align-top bg-no-repeat bg-center bg-contain mr-2 cursor-pointer"
            id="exampleCheck87" checked>
          <label class="form-check-label inline-block text-gray-800" for="exampleCheck87">Send me a copy of this
            message</label>
        </div>
        <button type="submit" class="
          w-full
          px-6
          py-2.5
          bg-blue-600
          text-white
          font-medium
          text-xs
          leading-tight
          uppercase
          rounded
          shadow-md
          hover:bg-blue-700 hover:shadow-lg
          focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0
          active:bg-blue-800 active:shadow-lg
          transition
          duration-150
          ease-in-out">Send</button>
      </form>
    </div>
  </section>
  <!-- Section: Design Block -->

</div>
<!-- Container for demo purpose -->

<!--  Email grp with button -->
<!-- small -->

<form class="p-4">
  <h1 class="mb-3 text-xl text-gray-600">Join Us</h1>
  <div class="flex">
    <input type="email"
      class="w-full rounded-l-md border-2 border-gray-200 bg-gray-100 p-2 text-sm text-gray-600 placeholder-gray-400 focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300 outline-none"
      placeholder="Email *" />
    <button
      class="rounded-r-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-all hover:bg-blue-700 disabled:bg-gray-400">Button</button>
  </div>
  <label for="email" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>

<!-- medium -->

<form class="p-4">
  <h1 class="mb-3 text-xl text-gray-600">Join Us</h1>
  <div class="flex">
    <input type="email"
      class="text-md w-full rounded-l-lg border-2 border-gray-200 bg-gray-100 p-3 text-gray-600 placeholder-gray-400 focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300 outline-none"
      placeholder="Email *" />
    <button
      class="text-md rounded-r-md bg-blue-600 px-6 py-3 font-medium text-white transition-all hover:bg-blue-700 disabled:bg-gray-400">Button</button>
  </div>
  <label for="email" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>

<!-- large -->

<form class="p-4">
  <h1 class="mb-3 text-xl text-gray-600">Join Us</h1>
  <div class="flex">
    <input type="email"
      class="w-full rounded-l-xl border-2 border-gray-200 bg-gray-100 p-5 text-lg text-gray-600 placeholder-gray-400 focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300 outline-none"
      placeholder="Email *" />
    <button
      class="rounded-r-lg bg-blue-600 px-8 py-4 text-lg font-medium text-white transition-all hover:bg-blue-700 disabled:bg-gray-400">Button</button>
  </div>
  <label for="email" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>
<!-- Email grp  -->
<!-- small -->

<form class="p-4">
    <h1 class="mb-3 text-xl text-gray-600">Email Address*</h1>
    <div class="flex">
        <input type="email"
            class="w-full rounded-md border-2 border-gray-200 bg-gray-100 p-2 text-sm text-gray-600 placeholder-gray-400 focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300 outline-none"
            placeholder="Email *" />
    </div>
    <label for="email" class="font-semi-bold text-xs text-gray-500"> We'll never share your email with anyone
        else</label>
</form>

<!-- medium -->

<form class="p-4">
    <h1 class="mb-3 text-xl text-gray-600">Email Address*</h1>
    <div class="flex">
        <input type="email"
            class="text-md w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-3 text-gray-600 placeholder-gray-400 focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300 outline-none"
            placeholder="Email *" />
    </div>
    <label for="email" class="font-semi-bold text-xs text-gray-500"> We'll never share your email with anyone
        else</label>
</form>

<!-- large -->

<form class="p-4">
    <h1 class="mb-3 text-xl text-gray-600">Email Address*</h1>
    <div class="flex">
        <input type="email"
            class="w-full rounded-xl border-2 border-gray-200 bg-gray-100 p-5 text-lg text-gray-600 placeholder-gray-400 focus:border-blue-600 disabled:border-gray-300 disabled:bg-gray-300 outline-none"
            placeholder="Email *" />
    </div>
    <label for="email" class="font-semi-bold text-xs text-gray-500"> We'll never share your email with anyone
        else</label>
</form>
<!--  Message textarea grp -->
<div class="w-full p-6">
  <h1 class="mb-4 text-xl font-semibold text-gray-800">Message *</h1>
  <textarea name="message" id="message" rows="8"
    class="w-full resize-none rounded-xl border-2 border-gray-100 p-4 outline-none focus:border-blue-600"
    placeholder="Your Message"></textarea>
  <p class="mt-3 text-sm text-gray-400">We'll never share your email with anyone else.</p>
</div>
<!-- search grp  -->
<!-- small -->
<form class="p-4">
    <h1 class="mb-3 text-xl text-gray-600">Search</h1>
    <div class="flex w-full items-center rounded-md border p-2 text-sm">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
            class="h-4 w-4 stroke-gray-400 stroke-2">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
        </svg>
        <input type="search" class="h-fit w-full pl-4 placeholder:text-gray-400/80 outline-none" placeholder="Search" />
    </div>
    <label for="email" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>

<!-- medium -->
<form class="p-4">
    <h1 class="mb-3 text-xl text-gray-600">Search</h1>
    <div class="text-md flex w-full items-center rounded-md border p-3">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
            class="h-5 w-5 stroke-gray-400 stroke-2">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
        </svg>
        <input type="search" class="h-fit w-full pl-4 placeholder:text-gray-400/80 outline-none" placeholder="Search" />
    </div>
    <label for="email" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>

<!-- large -->
<form class="p-4">
    <h1 class="mb-3 text-xl text-gray-600">Search</h1>
    <div class="flex w-full items-center rounded-lg border p-5 text-lg">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
            class="h-6 w-6 stroke-gray-400 stroke-2">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
        </svg>
        <input type="search" class="h-fit w-full pl-4 placeholder:text-gray-400/80 outline-none" placeholder="Search" />
    </div>
    <label for="email" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>
<!-- search grp with button  -->
<!-- small -->
<form class="p-4">
    <h1 class="mb-3 text-xl text-gray-600">Search</h1>
    <div class="flex">
        <input type="text" id="first_name"
            class="w-full rounded-l-md border-2 border-r-0 border-gray-200 bg-gray-100 p-2 text-sm focus:border-blue-600 outline-none"
            placeholder="Search" required />
        <button class="rounded-r-md bg-blue-600 p-2 text-white transition-all hover:bg-blue-700 disabled:bg-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="h-6 w-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
            </svg>
        </button>
    </div>
    <label for="search" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>

<!-- medium -->
<form class="p-4">
    <h1 class="mb-3 text-xl text-gray-600">Search</h1>
    <div class="flex">
        <input type="text" id="first_name"
            class="text-md w-full rounded-l-md border-2 border-r-0 border-gray-200 bg-gray-100 p-3 focus:border-blue-600 outline-none"
            placeholder="Search" required />
        <button class="rounded-r-md bg-blue-600 p-3 text-white transition-all hover:bg-blue-700 disabled:bg-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="h-6 w-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
            </svg>
        </button>
    </div>
    <label for="search" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>

<!-- large -->
<form class="p-4">
    <h1 class="mb-3 text-xl text-gray-600">Search</h1>
    <div class="flex">
        <input type="text" id="first_name"
            class="w-full rounded-l-lg border-2 border-r-0 border-gray-200 bg-gray-100 p-5 text-lg focus:border-blue-600 outline-none"
            placeholder="Search" required />
        <button class="rounded-r-lg bg-blue-600 p-4 text-white transition-all hover:bg-blue-700 disabled:bg-gray-300">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                stroke="currentColor" class="h-6 w-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                    d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
            </svg>
        </button>
    </div>
    <label for="search" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>


<!--  search grp with category and btn horizontal -->
<!-- small -->
<form class="p-4">
  <h1 class="mb-3 text-xl text-gray-600">Search</h1>
  <div class="flex">
    <input type="text" id="first_name"
      class="w-full rounded-l-md border-2 border-r-0 border-gray-200 bg-gray-100 p-2 text-sm focus:border-blue-600"
      placeholder="Search" required />
    <div>
      <select id="Categories"
        class="text-gray cursor-pointer border-l border-gray-200 bg-gray-100 h-full p-1 sm:p-2.5 text-base text-gray-600 outline-none transition-all hover:bg-gray-200">
        <option selected>Category</option>
        <option value="01">First</option>
        <option value="02">Second</option>
        <option value="03">Third</option>
        <option value="04">Fourth</option>
      </select>
    </div>
    <button class="rounded-r-md bg-blue-600 p-2 text-white transition-all hover:bg-blue-700 disabled:bg-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="h-6 w-6">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
      </svg>
    </button>
  </div>
  <label for="search" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>

<!-- medium -->
<form class="p-4">
  <h1 class="mb-3 text-xl text-gray-600">Search</h1>
  <div class="flex">
    <input type="text" id="first_name"
      class="text-md w-full rounded-l-md border-2 border-r-0 border-gray-200 bg-gray-100 p-3 focus:border-blue-600"
      placeholder="Search" required />
    <div>
      <select id="Categories"
        class="text-gray h-full cursor-pointer border-l border-gray-200 bg-gray-100 p-2 sm:p-3 sm:px-6 text-gray-600 outline-none transition-all hover:bg-gray-200">
        <option selected>Category</option>
        <option value="01">First</option>
        <option value="02">Second</option>
        <option value="03">Third</option>
        <option value="04">Fourth</option>
      </select>
    </div>
    <button class="rounded-r-md bg-blue-600 p-3 text-white transition-all hover:bg-blue-700 disabled:bg-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="h-6 w-6">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
      </svg>
    </button>
  </div>
  <label for="search" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>

<!-- large -->
<form class="p-4">
  <h1 class="mb-3 text-xl text-gray-600">Search</h1>
  <div class="flex">
    <input type="text" id="first_name"
      class="w-full rounded-l-lg border-2 border-r-0 border-gray-200 bg-gray-100 p-5 text-lg focus:border-blue-600"
      placeholder="Search" required />
    <div>
      <select id="Categories"
        class="text-gray h-full cursor-pointer border-l border-gray-200 bg-gray-100 p-2 sm:p-4 sm:px-8 text-lg text-gray-600 outline-none transition-all hover:bg-gray-200">
        <option selected>Category</option>
        <option value="01">First</option>
        <option value="02">Second</option>
        <option value="03">Third</option>
        <option value="04">Fourth</option>
      </select>
    </div>
    <button class="rounded-r-lg bg-blue-600 p-4 text-white transition-all hover:bg-blue-700 disabled:bg-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="h-6 w-6">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
      </svg>
    </button>
  </div>
  <label for="search" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>

<!--  search grp with category and btn vertical -->
<!-- small -->
<form class="p-4">
  <h1 class="mb-3 text-xl text-gray-600">Search</h1>
  <div class="flex flex-col gap-2">
    <input type="text" id="first_name"
      class="w-full rounded-md border-2 border-gray-200 bg-gray-100 p-2 text-sm focus:border-blue-600 outline-none"
      placeholder="Search" required />
    <div>
      <select id="Categories"
        class="text-gray h-full w-full rounded-md cursor-pointer border-2 border-gray-200 bg-gray-100 p-2 text-base text-gray-600 outline-none transition-all hover:bg-gray-200">
        <option selected>Category</option>
        <option value="01">First</option>
        <option value="02">Second</option>
        <option value="03">Third</option>
        <option value="04">Fourth</option>
      </select>
    </div>
    <button
      class="rounded-md bg-blue-600 p-2 text-white grid place-items-center transition-all hover:bg-blue-700 disabled:bg-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="h-6 w-6">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
      </svg>
    </button>
  </div>
</form>

<!-- medium -->
<form class="p-4">
  <h1 class="mb-3 text-xl text-gray-600">Search</h1>
  <div class="flex flex-col gap-2">
    <input type="text" id="first_name"
      class="text-md w-full rounded-md border-2 border-r-0 border-gray-200 bg-gray-100 p-3 focus:border-blue-600 outline-none"
      placeholder="Search" required />
    <div>
      <select id="Categories"
        class="text-gray h-full w-full rounded-md cursor-pointer border-2 border-gray-200 bg-gray-100 p-3 text-gray-600 outline-none transition-all hover:bg-gray-200">
        <option selected>Category</option>
        <option value="01">First</option>
        <option value="02">Second</option>
        <option value="03">Third</option>
        <option value="04">Fourth</option>
      </select>
    </div>
    <button
      class="rounded-md bg-blue-600 p-3 text-white transition-all grid place-items-center hover:bg-blue-700 disabled:bg-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="h-6 w-6">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
      </svg>
    </button>
  </div>
</form>

<!-- large -->
<form class="p-4">
  <h1 class="mb-3 text-xl text-gray-600">Search</h1>
  <div class="flex flex-col gap-2">
    <input type="text" id="first_name"
      class="w-full rounded-lg border-2 border-r-0 border-gray-200 bg-gray-100 p-5 text-lg focus:border-blue-600 outline-none"
      placeholder="Search" required />
    <div>
      <select id="Categories"
        class="text-gray w-full h-full cursor-pointer border-2 rounded-lg border-gray-200 bg-gray-100 p-5 text-lg text-gray-600 outline-none transition-all hover:bg-gray-200">
        <option selected>Category</option>
        <option value="01">First</option>
        <option value="02">Second</option>
        <option value="03">Third</option>
        <option value="04">Fourth</option>
      </select>
    </div>
    <button
      class="rounded-lg bg-blue-600 grid place-items-center p-5 text-white transition-all hover:bg-blue-700 disabled:bg-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="h-6 w-6">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
      </svg>
    </button>
  </div>
</form>

<-- search with zip and button -->
<!-- small -->
<form class="p-4">
  <h1 class="mb-3 text-xl text-gray-600">Search</h1>
  <div class="flex">
    <input type="text" id="first_name"
      class="w-full rounded-l-md border-2 border-r-0 border-gray-200 bg-gray-100 p-2 text-sm outline-none focus:border-blue-600"
      placeholder="Search" required />
    <div
      class="flex items-center border-2 border-l border-gray-200 bg-gray-100 px-3 text-gray-600 focus:border-blue-500">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
        class="h-4 w-4">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
      </svg>
      <input class="w-32 bg-gray-100 px-4 py-2 outline-none" type="text" placeholder="zip" />
    </div>
    <button class="rounded-r-md bg-blue-600 p-2 text-white transition-all hover:bg-blue-700 disabled:bg-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="h-6 w-6">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
      </svg>
    </button>
  </div>
  <label for="Search" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>

<!-- medium -->
<form class="p-4">
  <h1 class="mb-3 text-xl text-gray-600">Search</h1>
  <div class="flex">
    <input type="text" id="first_name"
      class="text-md w-full rounded-l-md border-2 border-r-0 border-gray-200 bg-gray-100 p-3 outline-none focus:border-blue-600"
      placeholder="Search" required />
    <div
      class="flex items-center border-2 border-l border-gray-200 bg-gray-100 px-3 text-gray-600 focus:border-blue-500">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
        class="h-5 w-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
      </svg>
      <input class="w-32 bg-gray-100 px-4 py-2 outline-none" type="text" placeholder="zip" />
    </div>
    <button class="rounded-r-md bg-blue-600 p-3 text-white transition-all hover:bg-blue-700 disabled:bg-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="h-6 w-6">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
      </svg>
    </button>
  </div>
  <label for="Search" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>

<!-- large -->
<form class="p-4">
  <h1 class="mb-3 text-xl text-gray-600">Search</h1>
  <div class="flex">
    <input type="text" id="first_name"
      class="w-full rounded-l-lg border-2 border-r-0 border-gray-200 bg-gray-100 p-5 text-lg outline-none focus:border-blue-600"
      placeholder="Search" required />
    <div
      class="flex items-center border-2 border-l border-gray-200 bg-gray-100 px-3 text-gray-600 focus:border-blue-500">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
        class="h-6 w-6">
        <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
      </svg>
      <input class="w-32 bg-gray-100 px-4 py-2 outline-none" type="text" placeholder="zip" />
    </div>
    <button class="rounded-r-lg bg-blue-600 p-4 text-white transition-all hover:bg-blue-700 disabled:bg-gray-300">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="h-6 w-6">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
      </svg>
    </button>
  </div>
  <label for="Search" class="font-semi-bold text-xs text-gray-500"> Lorem ipsum dolor sit amet </label>
</form>
```


---

## Having some problem ? 😕

If you still have a problem understanding this please join our [discord server](https://discord.gg/zrVMjGW8sB) to get help.
