Shipping Address Form

<!--
  Every field carries the exact autocomplete token the browser's address
  autofill expects - name, street-address, address-level2 (city),
  address-level1 (state), postal-code, country-name, tel. Get these right and a
  returning customer fills the whole form in one tap; get them wrong and autofill
  silently gives up. City/state and postal/phone share a row from sm up and stack
  below it.
-->
<form class="w-full max-w-md space-y-4 rounded-2xl border border-gray-200 bg-white p-5 sm:p-6 dark:border-gray-800 dark:bg-gray-950" action="#" method="post" novalidate>
  <h2 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Shipping address</h2>
  <div>
    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="sa-name">Full name</label>
    <input class="mt-1 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" id="sa-name" name="name" type="text" autocomplete="name" placeholder="Ada Lovelace" required />
  </div>
  <div>
    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="sa-street">Street address</label>
    <input class="mt-1 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" id="sa-street" name="street-address" type="text" autocomplete="street-address" placeholder="123 Market St" required />
  </div>
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
    <div>
      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="sa-city">City</label>
      <input class="mt-1 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" id="sa-city" name="city" type="text" autocomplete="address-level2" placeholder="San Francisco" required />
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="sa-state">State / region</label>
      <input class="mt-1 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" id="sa-state" name="state" type="text" autocomplete="address-level1" placeholder="CA" required />
    </div>
  </div>
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
    <div>
      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="sa-zip">Postal code</label>
      <input class="mt-1 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" id="sa-zip" name="postal-code" type="text" autocomplete="postal-code" inputmode="numeric" placeholder="94103" required />
    </div>
    <div>
      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="sa-country">Country</label>
      <input class="mt-1 block w-full rounded-lg border border-gray-300 bg-white px-3 py-2.5 text-sm text-gray-900 placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" id="sa-country" name="country" type="text" autocomplete="country-name" placeholder="United States" required />
    </div>
  </div>
  <button class="inline-flex w-full items-center justify-center rounded-lg bg-blue-600 px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white motion-reduce:transition-none dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950" type="submit">Save address</button>
</form>