textarea

              <div class="w-full space-y-1" x-data="{ text: '', maxLength: 100 }">
  <label class="text-sm font-medium text-zinc-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-zinc-200 placeholder-zinc-400 focus:border-zinc-300 focus:bg-transparent focus:outline-none focus:ring-blue-500 focus:ring-offset-2 focus:ring-2 sm:text-sm"
  ></textarea>
  <div class="mt-2 text-sm text-zinc-500">
    <span x-text="text.length"></span> /
    <span x-text="maxLength"></span> characters
  </div>
</div>