Input

<div class="mx-auto max-w-md space-y-6 p-6">
  <input
    type="text"
    class="h-10 w-full rounded-lg border border-gray-300 bg-white px-3 pb-0.5 text-sm text-gray-900 placeholder-gray-500 shadow-sm focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
    placeholder="Type something"
  />
</div>

<div class="mx-auto max-w-md p-6">
  <div>
    <label for="nickname" class="mb-1.5 block text-sm text-gray-700">Nickname</label>
    <input
      id="nickname"
      type="text"
      class="h-10 w-full rounded-lg border border-gray-300 bg-white px-3 pb-0.5 text-sm text-gray-900 placeholder-gray-500 shadow-sm focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
      placeholder="Type something"
    />
  </div>
</div>

<div class="mx-auto max-w-md p-6">
  <div>
    <label for="nickname" class="mb-1.5 block text-sm text-gray-700">Nickname</label>
    <input
      id="nickname"
      type="text"
      class="h-10 w-full rounded-lg border border-gray-300 bg-white px-3 pb-0.5 text-sm text-gray-900 placeholder-gray-500 shadow-sm focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
      placeholder="Type something"
    />
    <div class="mt-2 text-xs text-gray-700">What would you like people to call you?</div>
  </div>
</div>

<div class="mx-auto max-w-md p-6">
  <div>
    <label for="nickname" class="mb-1.5 block text-sm text-gray-700"> Nickname </label>
    <div class="relative">
      <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
        <!-- Heroicons name: mini/at-symbol -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 text-gray-600">
          <path
            fill-rule="evenodd"
            d="M5.404 14.596A6.5 6.5 0 1116.5 10a1.25 1.25 0 01-2.5 0 4 4 0 10-.571 2.06A2.75 2.75 0 0018 10a8 8 0 10-2.343 5.657.75.75 0 00-1.06-1.06 6.5 6.5 0 01-9.193 0zM10 7.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
      <input
        id="nickname"
        type="text"
        class="h-10 w-full rounded-lg border border-gray-300 bg-white pb-0.5 pl-10 pr-3 text-sm text-gray-900 placeholder-gray-500 shadow-sm focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
        placeholder="Type something"
      />
    </div>
  </div>
</div>

<div class="mx-auto max-w-md p-6">
  <div>
    <label for="password" class="mb-1.5 block text-sm text-gray-700"> Password </label>
    <div class="relative">
      <input
        id="password"
        type="text"
        class="h-10 w-full rounded-lg border border-gray-300 bg-white pb-0.5 pl-3 pr-10 text-sm text-gray-900 placeholder-gray-500 shadow-sm focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
        placeholder="Type something"
      />
      <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
        <!-- Heroicons name: mini/key -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 text-gray-600">
          <path
            fill-rule="evenodd"
            d="M8 7a5 5 0 113.61 4.804l-1.903 1.903A1 1 0 019 14H8v1a1 1 0 01-1 1H6v1a1 1 0 01-1 1H3a1 1 0 01-1-1v-2a1 1 0 01.293-.707L8.196 8.39A5.002 5.002 0 018 7zm5-3a.75.75 0 000 1.5A1.5 1.5 0 0114.5 7 .75.75 0 0016 7a3 3 0 00-3-3z"
            clip-rule="evenodd"
          />
        </svg>
      </div>
    </div>
  </div>
</div>

<div class="mx-auto max-w-xs p-6">
  <div>
    <label for="domain" class="mb-1.5 block text-sm text-gray-700"> Domain </label>
    <div class="flex rounded-lg shadow-sm">
      <div class="flex items-center rounded-l-lg border border-r-0 border-gray-300 bg-gray-50 px-3 text-center text-sm text-gray-500">https://</div>
      <div class="relative w-full">
        <input
          id="domain"
          type="text"
          class="h-10 w-full rounded-r-lg border border-gray-300 bg-white px-3 pb-0.5 text-sm text-gray-900 placeholder-gray-500 focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
        />
      </div>
    </div>
  </div>
</div>

<div class="mx-auto max-w-xs p-6">
  <div>
    <label for="width" class="mb-1.5 block text-sm text-gray-700"> Width </label>
    <div class="flex rounded-lg shadow-sm">
      <div class="relative w-full">
        <input
          type="number"
          id="width"
          class="h-10 w-full rounded-l-lg border border-gray-300 bg-white px-3 pb-0.5 text-sm text-gray-900 placeholder-gray-500 focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
        />
      </div>
      <div class="flex items-center rounded-r-lg border border-l-0 border-gray-300 bg-gray-50 px-3 text-center text-sm text-gray-500">px</div>
    </div>
  </div>
</div>

<div class="mx-auto max-w-sm p-6">
  <div>
    <label for="workspace" class="mb-1.5 block text-sm text-gray-700"> Create your workspace </label>
    <div
      class="flex h-10 items-center overflow-hidden rounded-lg border border-gray-300 shadow-sm focus-within:border-gray-500 focus-within:ring-1 focus-within:ring-gray-500"
    >
      <label for="workspace" class="pl-3 text-sm text-gray-900"> https://composedui.com/ </label>
      <input id="workspace" type="text" class="size-full bg-inherit pb-0.5 pr-3 text-sm text-gray-900 placeholder-gray-500 focus:outline-0" />
    </div>
  </div>
</div>

<div class="mx-auto max-w-md p-6">
  <fieldset>
    <legend class="mb-1.5 block text-sm text-gray-700">Credit Card Information</legend>
    <div class="-space-y-px rounded-lg shadow-sm">
      <div class="relative">
        <div class="pointer-events-none absolute inset-y-0 right-0 z-20 flex items-center pr-2.5">
          <svg class="h-6 w-9" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 16">
            <g fill="none" fill-rule="nonzero">
              <rect width="23.5" height="15.5" x=".25" y=".25" fill="#FFF" stroke="#000" stroke-opacity=".2" stroke-width=".5" rx="2" />
              <path
                fill="#1434CB"
                d="M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z"
              />
            </g>
          </svg>
        </div>
        <div>
          <label for="card-number" class="sr-only">Card number</label>
          <input
            type="text"
            id="card-number"
            class="relative h-10 w-full rounded-t-lg border border-gray-300 bg-white pb-0.5 pl-3 pr-14 text-sm text-gray-900 placeholder-gray-500 focus:z-10 focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
            placeholder="Card number"
          />
        </div>
      </div>
      <div class="grid auto-cols-fr grid-flow-col -space-x-px">
        <div>
          <label for="exp-date" class="sr-only">Expiration Date</label>
          <input
            type="text"
            id="exp-date"
            class="relative h-10 w-full rounded-bl-lg border border-gray-300 bg-white px-3 pb-0.5 text-sm text-gray-900 placeholder-gray-500 focus:z-10 focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
            placeholder="Exp Date"
          />
        </div>
        <div>
          <label for="cvv" class="sr-only">CVV</label>
          <input
            type="text"
            id="cvv"
            class="relative h-10 w-full border border-gray-300 bg-white px-3 pb-0.5 text-sm text-gray-900 placeholder-gray-500 focus:z-10 focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
            placeholder="CVV"
          />
        </div>
        <div>
          <label for="zip-code" class="sr-only">Zip Code</label>
          <input
            type="text"
            id="zip-code"
            class="relative h-10 w-full rounded-br-lg border border-gray-300 bg-white px-3 pb-0.5 text-sm text-gray-900 placeholder-gray-500 focus:z-10 focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
            placeholder="Zip Code"
          />
        </div>
      </div>
    </div>
    <div class="mt-2 text-xs text-gray-700">
      The card number should be 16 digits, the expiration date should be in the format MM/YY, the CVV should be the 3- or 4-digit code on the back
      of your card, and the zip code should be your 5-digit billing zip code.
    </div>
  </fieldset>
</div>