inputs #01

<div class="flex justify-center w-full px-12 py-48">
  <div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
    <div class="w-full">
      <div class="flex justify-between items-baseline mb-1">
        <label for="input-xs" class="font-medium text-base-500 text-xs"
          >Extra Small Input</label
        >
      </div>
      <div class="relative z-0 focus-within:z-10">
        <input
          placeholder="Extra small input"
          id="input-xs"
          name="input-xs"
          type="text"
          class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 h-8 px-4 py-2 text-xs rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md bg-white border border-transparent text-base-500 ring-1 ring-base-200 placeholder-base-400 focus:border-blue-500 focus:ring-accent-100 focus:ring-2 focus:outline-none shadow-sm"
        />
      </div>
    </div>
    <div class="w-full">
      <div class="flex justify-between items-baseline mb-1">
        <label for="input-sm" class="font-medium text-base-500 text-xs"
          >Small Input</label
        >
      </div>
      <div class="relative z-0 focus-within:z-10">
        <input
          placeholder="Small input"
          id="input-sm"
          name="input-sm"
          type="text"
          class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 h-9 px-4 py-2 text-xs rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md bg-white border border-transparent text-base-500 ring-1 ring-base-200 placeholder-base-400 focus:border-blue-500 focus:ring-accent-100 focus:ring-2 focus:outline-none shadow-sm"
        />
      </div>
    </div>
    <div class="w-full">
      <div class="flex justify-between items-baseline mb-1">
        <label for="input-base" class="font-medium text-base-500 text-sm"
          >Base Input (Default)</label
        >
      </div>
      <div class="relative z-0 focus-within:z-10">
        <input
          placeholder="Base input (default size)"
          id="input-base"
          name="input-base"
          type="text"
          class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 h-10 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md bg-white border border-transparent text-base-500 ring-1 ring-base-200 placeholder-base-400 focus:border-blue-500 focus:ring-accent-100 focus:ring-2 focus:outline-none shadow-sm"
        />
      </div>
    </div>
    <div class="w-full">
      <div class="flex justify-between items-baseline mb-1">
        <label for="input-lg" class="font-medium text-base-500 text-base"
          >Large Input</label
        >
      </div>
      <div class="relative z-0 focus-within:z-10">
        <input
          placeholder="Large input"
          id="input-lg"
          name="input-lg"
          type="text"
          class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 h-12 px-4 py-2.5 text-base rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md bg-white border border-transparent text-base-500 ring-1 ring-base-200 placeholder-base-400 focus:border-blue-500 focus:ring-accent-100 focus:ring-2 focus:outline-none shadow-sm"
        />
      </div>
    </div>
    <div class="w-full">
      <div class="flex justify-between items-baseline mb-1">
        <label for="input-xl" class="font-medium text-base-500 text-lg"
          >Extra Large Input</label
        >
      </div>
      <div class="relative z-0 focus-within:z-10">
        <input
          placeholder="Extra large input"
          id="input-xl"
          name="input-xl"
          type="text"
          class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 h-14 px-5 py-3 text-lg rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md bg-white border border-transparent text-base-500 ring-1 ring-base-200 placeholder-base-400 focus:border-blue-500 focus:ring-accent-100 focus:ring-2 focus:outline-none shadow-sm"
        />
      </div>
    </div>
  </div>
</div>