textarea #01

<div
  class="flex flex-wrap max-w-md items-end justify-center gap-4 py-12 mx-auto"
>
  <div class="space-y-1 w-full" x-data="{ text: '', maxLength: 100 }">
    <label class="text-sm leading-normal text-base-500 font-medium">
      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 text-accent-700 duration-300 bg-white border border-transparent rounded-lg appearance-none 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>