Input

<div class="mx-auto max-w-xs">
  <input
    type="text"
    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
    placeholder="Name"
  />
</div>

<div class="mx-auto max-w-xs">
  <div>
    <label for="example1" class="mb-1 block text-sm font-medium text-gray-700">Email</label>
    <input
      type="email"
      id="example1"
      class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
      placeholder="you@email.com"
    />
  </div>
</div>

<div class="mx-auto max-w-xs">
  <div>
    <label
      for="example2"
      class="mb-1 block text-sm font-medium text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*']"
      >Email</label
    >
    <input
      type="email"
      id="example2"
      class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
      placeholder="you@email.com"
    />
    <p class="tex-sm mt-1 text-gray-500">This is a help message.</p>
  </div>
</div>

<div class="mx-auto max-w-xs">
  <div>
    <label
      for="example3"
      class="mb-1 block text-sm font-medium text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*']"
      >Email</label
    >
    <input
      type="email"
      id="example3"
      class="block w-full rounded-md border-red-300 shadow-sm focus:border-red-300 focus:ring focus:ring-red-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
      placeholder="you@email.com"
    />
    <p class="tex-sm mt-1 text-red-500">This is a error message.</p>
  </div>
</div>

<div class="mx-auto max-w-xs">
  <input
    type="text"
    disabled
    value="Steve Jobs"
    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
    placeholder="Full name"
  />
</div>

<div class="mx-auto max-w-xs">
  <div>
    <label for="example4" class="mb-1 block text-sm font-medium text-gray-700">Email</label>
    <div class="relative">
      <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center px-2.5">
        <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 text-gray-500"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
          />
        </svg>
      </div>
      <input
        type="email"
        id="example4"
        class="block w-full rounded-md border-gray-300 pl-10 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
        placeholder="you@email.com"
      />
    </div>
  </div>
</div>

<div class="mx-auto max-w-xs">
  <div>
    <label for="example5" class="mb-1 block text-sm font-medium text-gray-700">Email</label>
    <div class="relative">
      <div class="absolute inset-y-0 right-0 flex items-center px-2.5">
        <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 text-gray-500"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
          />
        </svg>
      </div>
      <input
        type="email"
        id="example5"
        class="block w-full rounded-md border-gray-300 pr-10 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
        placeholder="you@email.com"
      />
    </div>
  </div>
</div>

<div class="mx-auto max-w-xs">
  <div>
    <label for="example6" class="mb-1 block text-sm font-medium text-gray-700">Price</label>
    <div class="relative">
      <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center px-2.5 text-gray-500">$</div>
      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2.5 text-gray-500">USD</div>
      <input
        type="email"
        id="example6"
        class="block w-full rounded-md border-gray-300 px-8 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
        placeholder="0.00"
      />
    </div>
  </div>
</div>

<div class="mx-auto max-w-xs space-y-4">
  <div>
    <label for="example7" class="mb-1 block text-sm font-medium text-gray-700">Website</label>
    <div class="relative z-0 flex">
      <div
        class="inset-y-0 left-0 flex items-center rounded-md rounded-r-none border border-r-0 border-gray-300 bg-gray-100 px-2.5 text-gray-700"
      >
        https://
      </div>
      <input
        type="url"
        id="example7"
        class="block w-full rounded-md rounded-l-none border-gray-300 shadow-sm focus:z-10 focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
        placeholder="example.com"
      />
    </div>
  </div>
  <div>
    <label for="example7" class="mb-1 block text-sm font-medium text-gray-700">Website</label>
    <div class="relative z-0 flex">
      <input
        type="url"
        id="example7"
        class="block w-full rounded-md rounded-r-none border-gray-300 shadow-sm focus:z-10 focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
        placeholder="Enter custom domain"
      />
      <div
        class="inset-y-0 left-0 flex items-center rounded-md rounded-l-none border border-l-0 border-gray-300 bg-gray-100 px-2.5 text-gray-700"
      >
        .sailboatui.com
      </div>
    </div>
  </div>
</div>

<div class="mx-auto max-w-xs">
  <div>
    <label for="example8" class="mb-1 block text-sm font-medium text-gray-700">Url</label>
    <div class="relative z-0 flex">
      <input
        type="url"
        id="example8"
        class="block w-full rounded-md rounded-r-none border-gray-300 shadow-sm focus:z-10 focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
        placeholder="example.com"
        value="https://sailboatui.com/"
      />
      <button
        for="example8"
        class="flex items-center space-x-1 rounded-md rounded-l-none border border-l-0 border-gray-300 px-2.5 text-gray-700 hover:bg-gray-100"
      >
        <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"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5A3.375 3.375 0 006.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0015 2.25h-1.5a2.251 2.251 0 00-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 00-9-9z"
          />
        </svg>
        <span>Copy</span>
      </button>
    </div>
  </div>
</div>

<div class="mx-auto max-w-xs">
  <div>
    <div class="group relative">
      <input
        type="text"
        id="example9"
        class="block w-full rounded-md border-gray-300 px-10 shadow-sm transition-all hover:bg-gray-50 focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
        placeholder="Quick search..."
      />
      <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center px-2.5 text-gray-500">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5">
          <path
            fill-rule="evenodd"
            d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2.5">
        <span
          class="rounded border px-1.5 text-sm text-gray-400 shadow-sm transition-all group-hover:border-primary-500 group-hover:text-primary-500"
          ><kbd>⌘</kbd> <kbd>K</kbd></span
        >
      </div>
    </div>
  </div>
</div>

<div class="mx-auto max-w-xs space-y-5">
  <div>
    <label for="example10" class="mb-1 block text-sm font-medium text-gray-700">Phone number</label>
    <div class="relative">
      <div class="absolute inset-y-0 left-0 flex items-center text-gray-500">
        <label for="currency" class="sr-only">Currency</label>
        <select
          id="currency"
          id="currency"
          class="h-full rounded-md border-transparent bg-transparent py-0 pl-3 pr-7 text-gray-500 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
        >
          <option>US</option>
          <option>CA</option>
          <option>JP</option>
          <option>CN</option>
        </select>
      </div>
      <div class="absolute inset-y-0 right-0 flex items-center px-2.5">
        <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 text-gray-500"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z"
          />
        </svg>
      </div>
      <input
        type="text"
        id="example10"
        class="block w-full rounded-md border-gray-300 pl-16 pr-10 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
        placeholder="+1 (666) 000-0000"
      />
    </div>
  </div>
  <div>
    <label for="example11" class="mb-1 block text-sm font-medium text-gray-700">Price</label>
    <div class="relative">
      <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center px-2.5 text-gray-500">$</div>
      <div class="absolute inset-y-0 right-0 flex items-center text-gray-500">
        <label for="currency" class="sr-only">Currency</label>
        <select
          id="currency"
          id="currency"
          class="h-full rounded-md border-transparent bg-transparent py-0 pl-3 pr-7 text-gray-500 focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
        >
          <option>USD</option>
          <option>CAD</option>
          <option>EUR</option>
        </select>
      </div>
      <input
        type="text"
        id="example11"
        class="block w-full rounded-md border-gray-300 pl-8 pr-16 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
        placeholder="0.00"
      />
    </div>
  </div>
</div>

<div class="mx-auto max-w-xs">
  <div>
    <div class="relative">
      <div class="absolute top-2.5 left-3 flex items-center text-gray-500">
        <label for="example12" class="block text-xs font-medium text-gray-700">Full name</label>
      </div>
      <input
        type="text"
        id="example12"
        class="block w-full rounded-md border-gray-300 pt-6 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
        placeholder="You name"
      />
    </div>
  </div>
</div>

<div class="mx-auto max-w-xs">
  <div>
    <div class="relative">
      <input
        type="text"
        id="example13"
        placeholder=" "
        class="peer block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
      />
      <label
        for="example13"
        class="peer-focus:base absolute left-2 top-0 z-10 -translate-y-2 transform bg-white px-1 text-xs text-gray-500 transition-all peer-placeholder-shown:translate-y-3 peer-placeholder-shown:text-sm peer-focus:-translate-y-2 peer-focus:text-xs peer-disabled:bg-transparent"
        >Full name</label
      >
    </div>
  </div>
</div>

<div class="mx-auto max-w-xs space-y-5">
  <input
    type="text"
    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
    placeholder="Default"
  />
  <input
    type="text"
    class="block w-full border-0 border-b-2 border-gray-200 focus:border-primary-500 focus:ring-0 disabled:cursor-not-allowed disabled:text-gray-500"
    placeholder="Underline"
  />
  <input
    type="text"
    class="block w-full rounded-md border-transparent bg-gray-100 focus:border-primary-400 focus:bg-white focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
    placeholder="Fill"
  />
</div>

<div class="mx-auto max-w-xs space-y-5">
  <input
    type="text"
    class="block w-full rounded-md border-gray-300 text-xs shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
    placeholder="Small"
  />
  <input
    type="text"
    class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
    placeholder="Normal"
  />
  <input
    type="text"
    class="block w-full rounded-md border-gray-300 py-3 text-xl shadow-sm focus:border-primary-400 focus:ring focus:ring-primary-200 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500"
    placeholder="Large"
  />
</div>