Textarea Autoresize

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Auto-Resize Textarea -->
    <div class="space-y-2">
      <label for="auto-resize-textarea" class="block text-sm font-medium text-gray-700">Auto-Resize Textarea</label>
      <textarea id="auto-resize-textarea" rows="3" placeholder="Type here and watch me grow..." 
        class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none overflow-hidden"></textarea>
      <p class="text-sm text-gray-500">This textarea will automatically expand as you type</p>
    </div>

    <!-- Auto-Resize with Max Height -->
    <div class="space-y-2">
      <label for="max-height-textarea" class="block text-sm font-medium text-gray-700">Auto-Resize with Max Height</label>
      <div class="relative">
        <textarea id="max-height-textarea" rows="3" placeholder="This textarea will stop expanding after reaching a certain height..." 
          class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none overflow-auto max-h-60"></textarea>
      </div>
      <p class="text-sm text-gray-500">Maximum height limited with scrolling</p>
    </div>

    <!-- Auto-Resize with Min Height -->
    <div class="space-y-2">
      <label for="min-height-textarea" class="block text-sm font-medium text-gray-700">Auto-Resize with Min Height</label>
      <div class="relative">
        <textarea id="min-height-textarea" rows="3" placeholder="This textarea has a minimum height..." 
          class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none overflow-hidden min-h-[100px]"></textarea>
      </div>
      <p class="text-sm text-gray-500">Will always be at least 100px tall</p>
    </div>

    <!-- Auto-Resize with Character Counter -->
    <div class="space-y-2">
      <div class="flex justify-between">
        <label for="counter-auto-textarea" class="block text-sm font-medium text-gray-700">Auto-Resize with Counter</label>
        <span id="auto-char-count" class="text-xs text-gray-500">0/200</span>
      </div>
      <textarea id="counter-auto-textarea" maxlength="200" rows="3" placeholder="Type here and watch me grow with character counting..." 
        class="w-full px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none overflow-hidden"></textarea>
    </div>
  </div>

  <script>
    // Auto-resize functionality
    function autoResize(textarea) {
      textarea.style.height = 'auto';
      textarea.style.height = textarea.scrollHeight + 'px';
    }

    // Initialize all auto-resize textareas
    const autoResizeTextareas = [
      document.getElementById('auto-resize-textarea'),
      document.getElementById('min-height-textarea'),
      document.getElementById('counter-auto-textarea')
    ];

    // Max height textarea (different handling)
    const maxHeightTextarea = document.getElementById('max-height-textarea');
    
    // Apply auto-resize to all suitable textareas
    autoResizeTextareas.forEach(textarea => {
      // Initial resize
      autoResize(textarea);
      
      // Resize on input
      textarea.addEventListener('input', function() {
        autoResize(this);
      });
    });

    // Special handling for max-height textarea (resizes but allows scrolling)
    maxHeightTextarea.addEventListener('input', function() {
      this.style.height = 'auto';
      if (this.scrollHeight <= parseInt(getComputedStyle(this).maxHeight)) {
        this.style.height = this.scrollHeight + 'px';
      } else {
        this.style.height = getComputedStyle(this).maxHeight;
      }
    });

    // Character counter functionality
    const counterAutoTextarea = document.getElementById('counter-auto-textarea');
    const autoCharCount = document.getElementById('auto-char-count');

    counterAutoTextarea.addEventListener('input', function() {
      const currentLength = this.value.length;
      autoCharCount.textContent = `${currentLength}/200`;
    });
  </script>
</section>