textarea #01

<div
  class="flex flex-wrap items-end justify-center max-w-md py-12 mx-auto gap-4"
>
  <div class="w-full space-y-1" x-data="{ text: '', maxLength: 100 }">
    <label class="text-sm font-medium text-base-500"> Message </label>
    <textarea
      id="input-char-limit"
      name="input-char-limit"
      x-model="text"
      :maxlength="maxLength"
      rows="4"
      placeholder="Enter your message"
      class="block w-full px-4 py-2 text-sm bg-white border border-transparent rounded-lg appearance-none text-blue-700 duration-300 ring-1 ring-base-200 placeholder-base-400 focus:border-base-300 focus:bg-transparent focus:outline-none focus:ring-accent-500 focus:ring-offset-2 focus:ring-2 sm:text-sm"
    ></textarea>
    <div class="mt-2 text-sm text-base-500">
      <span x-text="text.length"></span> /
      <span x-text="maxLength"></span> characters
    </div>
  </div>
</div>