Tailwind CSS Textarea Components

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Textarea with Legend -->
    <fieldset class="border border-gray-300 rounded-md p-4">
      <legend class="text-sm font-medium text-gray-700 px-2">About You</legend>
      <div class="space-y-2">
        <textarea placeholder="Tell us about yourself..." 
          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"></textarea>
        <div class="flex justify-between items-center">
          <span class="text-xs text-gray-500">Optional</span>
          <span class="text-xs text-gray-500">Maximum 200 characters</span>
        </div>
      </div>
    </fieldset>

    <!-- Textarea with Top and Bottom Labels -->
    <div class="space-y-2">
      <div class="flex justify-between items-center">
        <label for="experience-textarea" class="block text-sm font-medium text-gray-700">Work Experience</label>
        <span class="text-xs font-medium text-blue-600">Required</span>
      </div>
      <textarea id="experience-textarea" rows="4" placeholder="Describe your previous work experience..." 
        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"></textarea>
      <div class="flex justify-between items-center">
        <span class="text-xs text-gray-500">Be specific about your responsibilities</span>
        <span id="experience-counter" class="text-xs text-gray-500">0/500</span>
      </div>
    </div>

    <!-- Textarea with Side Label -->
    <div class="space-y-4">
      <label for="side-label-textarea" class="block text-sm font-medium text-gray-700">Additional Comments</label>
      <div class="flex space-x-4">
        <div class="w-2/3">
          <textarea id="side-label-textarea" rows="4" placeholder="Any other information you'd like to share..." 
            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"></textarea>
        </div>
        <div class="w-1/3 text-sm text-gray-500">
          <p class="mb-2 font-medium">Guidelines:</p>
          <ul class="list-disc pl-4 space-y-1 text-xs">
            <li>Include any special requirements</li>
            <li>Mention any preferences</li>
            <li>Ask any questions you may have</li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Character counter functionality
    const experienceTextarea = document.getElementById('experience-textarea');
    const experienceCounter = document.getElementById('experience-counter');

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

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Required Textarea with Validation -->
    <form id="form-required" novalidate class="space-y-2">
      <div class="flex justify-between">
        <label for="required-textarea" class="block text-sm font-medium text-gray-700">Feedback</label>
        <span class="text-xs font-medium text-red-600">*Required</span>
      </div>
      <textarea id="required-textarea" rows="4" placeholder="Please provide your feedback..." required
        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 peer"></textarea>
      <p class="mt-1 invisible peer-invalid:visible text-sm text-red-600" id="required-error">
        This field is required
      </p>
      <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Submit Feedback
      </button>
    </form>

    <!-- Minimum Length Validation -->
    <form id="form-min-length" novalidate class="space-y-2">
      <label for="min-length-textarea" class="block text-sm font-medium text-gray-700">Review</label>
      <textarea id="min-length-textarea" rows="4" placeholder="Please provide a detailed review..." minlength="20"
        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"></textarea>
      <p class="mt-1 text-sm text-red-600 hidden" id="min-length-error">
        Please enter at least 20 characters
      </p>
      <div class="flex justify-between items-center">
        <span class="text-xs text-gray-500">Minimum 20 characters</span>
        <span id="min-length-counter" class="text-xs text-gray-500">0/20</span>
      </div>
      <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Submit Review
      </button>
    </form>

    <!-- Maximum Word Count Validation -->
    <form id="form-max-words" novalidate class="space-y-2">
      <label for="max-words-textarea" class="block text-sm font-medium text-gray-700">Summary</label>
      <textarea id="max-words-textarea" rows="4" placeholder="Please provide a brief summary (max 50 words)..."
        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"></textarea>
      <p class="mt-1 text-sm text-red-600 hidden" id="max-words-error">
        Please limit your summary to 50 words
      </p>
      <div class="flex justify-between items-center">
        <span class="text-xs text-gray-500">Maximum 50 words</span>
        <span id="word-counter" class="text-xs text-gray-500">0/50 words</span>
      </div>
      <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Submit Summary
      </button>
    </form>

    <!-- Pattern Validation (must include specific words) -->
    <form id="form-pattern" novalidate class="space-y-2">
      <label for="pattern-textarea" class="block text-sm font-medium text-gray-700">Job Description</label>
      <textarea id="pattern-textarea" rows="4" placeholder="Describe the job responsibilities..." 
        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"></textarea>
      <p class="mt-1 text-sm text-red-600 hidden" id="pattern-error">
        Please include the words "responsibilities" and "qualifications"
      </p>
      <p class="text-xs text-gray-500">Please include the keywords "responsibilities" and "qualifications" in your description</p>
      <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Submit Description
      </button>
    </form>
  </div>

  <script>
    // Required textarea validation
    const formRequired = document.getElementById('form-required');
    const requiredTextarea = document.getElementById('required-textarea');
    const requiredError = document.getElementById('required-error');

    formRequired.addEventListener('submit', function(e) {
      e.preventDefault();
      
      if (!requiredTextarea.value.trim()) {
        requiredTextarea.classList.add('border-red-500');
        requiredError.classList.remove('invisible');
      } else {
        requiredTextarea.classList.remove('border-red-500');
        requiredError.classList.add('invisible');
        alert('Feedback submitted successfully!');
        this.reset();
      }
    });

    // Minimum length validation
    const formMinLength = document.getElementById('form-min-length');
    const minLengthTextarea = document.getElementById('min-length-textarea');
    const minLengthError = document.getElementById('min-length-error');
    const minLengthCounter = document.getElementById('min-length-counter');

    minLengthTextarea.addEventListener('input', function() {
      const currentLength = this.value.length;
      minLengthCounter.textContent = `${currentLength}/20`;
      
      if (currentLength < 20) {
        minLengthError.classList.remove('hidden');
        this.classList.add('border-red-500');
      } else {
        minLengthError.classList.add('hidden');
        this.classList.remove('border-red-500');
      }
    });

    formMinLength.addEventListener('submit', function(e) {
      e.preventDefault();
      
      if (minLengthTextarea.value.length < 20) {
        minLengthTextarea.classList.add('border-red-500');
        minLengthError.classList.remove('hidden');
      } else {
        minLengthTextarea.classList.remove('border-red-500');
        minLengthError.classList.add('hidden');
        alert('Review submitted successfully!');
        this.reset();
        minLengthCounter.textContent = '0/20';
      }
    });

    // Maximum word count validation
    const formMaxWords = document.getElementById('form-max-words');
    const maxWordsTextarea = document.getElementById('max-words-textarea');
    const maxWordsError = document.getElementById('max-words-error');
    const wordCounter = document.getElementById('word-counter');

    function countWords(text) {
      return text.trim().split(/\s+/).filter(Boolean).length;
    }

    maxWordsTextarea.addEventListener('input', function() {
      const wordCount = countWords(this.value);
      wordCounter.textContent = `${wordCount}/50 words`;
      
      if (wordCount > 50) {
        maxWordsError.classList.remove('hidden');
        this.classList.add('border-red-500');
      } else {
        maxWordsError.classList.add('hidden');
        this.classList.remove('border-red-500');
      }
    });

    formMaxWords.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const wordCount = countWords(maxWordsTextarea.value);
      if (wordCount > 50) {
        maxWordsTextarea.classList.add('border-red-500');
        maxWordsError.classList.remove('hidden');
      } else {
        maxWordsTextarea.classList.remove('border-red-500');
        maxWordsError.classList.add('hidden');
        alert('Summary submitted successfully!');
        this.reset();
        wordCounter.textContent = '0/50 words';
      }
    });

    // Pattern validation
    const formPattern = document.getElementById('form-pattern');
    const patternTextarea = document.getElementById('pattern-textarea');
    const patternError = document.getElementById('pattern-error');

    formPattern.addEventListener('submit', function(e) {
      e.preventDefault();
      
      const text = patternTextarea.value.toLowerCase();
      if (!text.includes('responsibilities') || !text.includes('qualifications')) {
        patternTextarea.classList.add('border-red-500');
        patternError.classList.remove('hidden');
      } else {
        patternTextarea.classList.remove('border-red-500');
        patternError.classList.add('hidden');
        alert('Job description submitted successfully!');
        this.reset();
      }
    });
  </script>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Extra Small Textarea -->
    <div class="space-y-2">
      <label for="xs-textarea" class="block text-xs font-medium text-gray-700">Extra Small</label>
      <textarea id="xs-textarea" rows="2" placeholder="Extra small textarea" 
        class="w-full px-2 py-1 text-xs bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
    </div>

    <!-- Small Textarea -->
    <div class="space-y-2">
      <label for="sm-textarea" class="block text-sm font-medium text-gray-700">Small</label>
      <textarea id="sm-textarea" rows="2" placeholder="Small textarea" 
        class="w-full px-3 py-1.5 text-sm bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
    </div>

    <!-- Medium Textarea (Default) -->
    <div class="space-y-2">
      <label for="md-textarea" class="block text-sm font-medium text-gray-700">Medium (Default)</label>
      <textarea id="md-textarea" rows="3" placeholder="Medium textarea" 
        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"></textarea>
    </div>

    <!-- Large Textarea -->
    <div class="space-y-2">
      <label for="lg-textarea" class="block text-base font-medium text-gray-700">Large</label>
      <textarea id="lg-textarea" rows="4" placeholder="Large textarea" 
        class="w-full px-4 py-3 text-lg bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
    </div>

    <!-- Extra Large Textarea -->
    <div class="space-y-2">
      <label for="xl-textarea" class="block text-lg font-medium text-gray-700">Extra Large</label>
      <textarea id="xl-textarea" rows="5" placeholder="Extra large textarea" 
        class="w-full px-5 py-4 text-xl bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
    </div>

    <!-- Responsive Textarea -->
    <div class="space-y-2">
      <label for="responsive-textarea" class="block text-sm sm:text-base font-medium text-gray-700">Responsive</label>
      <textarea id="responsive-textarea" rows="3" placeholder="Responsive textarea" 
        class="w-full px-2 py-1 text-xs sm:px-3 sm:py-2 sm:text-sm md:px-4 md:py-2 md:text-base lg:px-4 lg:py-3 lg:text-lg bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
      <p class="text-xs sm:text-sm text-gray-500">This textarea adapts its size to the screen width</p>
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Ghost Textarea -->
    <div class="space-y-2">
      <label for="ghost-textarea" class="block text-sm font-medium text-gray-700">Notes</label>
      <textarea id="ghost-textarea" rows="4" placeholder="Enter your notes here..." 
        class="w-full px-4 py-2 bg-transparent border-0 border-b border-gray-300 focus:border-blue-500 focus:ring-0 focus:outline-none"></textarea>
      <p class="text-sm text-gray-500">Minimalist design with no background</p>
    </div>

    <!-- Ghost Textarea with Hover Effect -->
    <div class="space-y-2">
      <label for="ghost-hover-textarea" class="block text-sm font-medium text-gray-700">Ideas</label>
      <textarea id="ghost-hover-textarea" rows="4" placeholder="Share your ideas here..." 
        class="w-full px-4 py-2 bg-transparent border-0 border-b border-gray-300 hover:border-gray-400 focus:border-blue-500 focus:ring-0 focus:outline-none transition-colors"></textarea>
    </div>

    <!-- Ghost Textarea with Background on Focus -->
    <div class="space-y-2">
      <label for="ghost-focus-textarea" class="block text-sm font-medium text-gray-700">Feedback</label>
      <textarea id="ghost-focus-textarea" rows="4" placeholder="Share your feedback here..." 
        class="w-full px-4 py-2 bg-transparent border-0 border-b border-gray-300 focus:bg-gray-50 focus:border-blue-500 focus:ring-0 focus:outline-none transition-all"></textarea>
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Disabled Textarea -->
    <div class="space-y-2">
      <label for="disabled-textarea" class="block text-sm font-medium text-gray-500">Disabled Textarea</label>
      <textarea id="disabled-textarea" rows="4" placeholder="This textarea is disabled" disabled
        class="w-full px-4 py-2 bg-gray-50 text-gray-500 border border-gray-300 rounded-md shadow-sm cursor-not-allowed"></textarea>
      <p class="text-sm text-gray-500">You cannot edit this field</p>
    </div>

    <!-- Read Only Textarea -->
    <div class="space-y-2">
      <label for="readonly-textarea" class="block text-sm font-medium text-gray-700">Read Only Textarea</label>
      <textarea id="readonly-textarea" rows="4" readonly
        class="w-full px-4 py-2 bg-gray-50 border border-gray-300 rounded-md shadow-sm focus:outline-none">This is read-only content that cannot be modified, but you can still focus on this field and copy its contents.</textarea>
      <p class="text-sm text-gray-500">You can read and copy but not edit</p>
    </div>

    <!-- Disabled with Text Content -->
    <div class="space-y-2">
      <label for="disabled-content-textarea" class="block text-sm font-medium text-gray-500">Submission Review</label>
      <textarea id="disabled-content-textarea" rows="4" disabled
        class="w-full px-4 py-2 bg-gray-50 text-gray-500 border border-gray-300 rounded-md shadow-sm cursor-not-allowed">Your submission has been received and is currently under review. You will be notified via email once processing is complete.</textarea>
    </div>

    <!-- Conditionally Disabled Textarea -->
    <div class="space-y-2">
      <div class="flex justify-between">
        <label for="conditional-textarea" class="block text-sm font-medium text-gray-700">Additional Comments</label>
        <div class="flex items-center">
          <input type="checkbox" id="enable-textarea" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
          <label for="enable-textarea" class="ml-2 text-sm text-gray-700">Enable editing</label>
        </div>
      </div>
      <textarea id="conditional-textarea" rows="4" placeholder="Check the box above to enable this textarea" disabled
        class="w-full px-4 py-2 bg-gray-50 text-gray-500 border border-gray-300 rounded-md shadow-sm cursor-not-allowed transition-colors"></textarea>
    </div>
  </div>

  <script>
    // Enable/disable textarea based on checkbox
    const enableCheckbox = document.getElementById('enable-textarea');
    const conditionalTextarea = document.getElementById('conditional-textarea');

    enableCheckbox.addEventListener('change', function() {
      if (this.checked) {
        conditionalTextarea.disabled = false;
        conditionalTextarea.classList.remove('bg-gray-50', 'text-gray-500', 'cursor-not-allowed');
        conditionalTextarea.classList.add('bg-white', 'focus:outline-none', 'focus:ring-2', 'focus:ring-blue-500', 'focus:border-blue-500');
      } else {
        conditionalTextarea.disabled = true;
        conditionalTextarea.classList.add('bg-gray-50', 'text-gray-500', 'cursor-not-allowed');
        conditionalTextarea.classList.remove('bg-white', 'focus:outline-none', 'focus:ring-2', 'focus:ring-blue-500', 'focus:border-blue-500');
      }
    });
  </script>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Default Textarea -->
    <div class="space-y-2">
      <label for="default-textarea" class="block text-sm font-medium text-gray-700">Default</label>
      <textarea id="default-textarea" rows="3" placeholder="Default textarea" 
        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-gray-500 focus:border-gray-500"></textarea>
    </div>

    <!-- Primary Color Textarea -->
    <div class="space-y-2">
      <label for="primary-textarea" class="block text-sm font-medium text-blue-700">Primary</label>
      <textarea id="primary-textarea" rows="3" placeholder="Primary textarea" 
        class="w-full px-4 py-2 bg-white border border-blue-500 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-blue-600"></textarea>
    </div>

    <!-- Secondary Color Textarea -->
    <div class="space-y-2">
      <label for="secondary-textarea" class="block text-sm font-medium text-purple-700">Secondary</label>
      <textarea id="secondary-textarea" rows="3" placeholder="Secondary textarea" 
        class="w-full px-4 py-2 bg-white border border-purple-500 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-purple-600"></textarea>
    </div>

    <!-- Success Color Textarea -->
    <div class="space-y-2">
      <label for="success-textarea" class="block text-sm font-medium text-green-700">Success</label>
      <textarea id="success-textarea" rows="3" placeholder="Success textarea" 
        class="w-full px-4 py-2 bg-white border border-green-500 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 text-green-600"></textarea>
      <p class="text-sm text-green-600">Your response is valid!</p>
    </div>

    <!-- Warning Color Textarea -->
    <div class="space-y-2">
      <label for="warning-textarea" class="block text-sm font-medium text-yellow-700">Warning</label>
      <textarea id="warning-textarea" rows="3" placeholder="Warning textarea" 
        class="w-full px-4 py-2 bg-white border border-yellow-500 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:border-yellow-500 text-yellow-600"></textarea>
      <p class="text-sm text-yellow-600">Please review your response before submitting</p>
    </div>

    <!-- Error Color Textarea -->
    <div class="space-y-2">
      <label for="error-textarea" class="block text-sm font-medium text-red-700">Error</label>
      <textarea id="error-textarea" rows="3" placeholder="Error textarea" 
        class="w-full px-4 py-2 bg-white border border-red-500 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-red-500 text-red-600"></textarea>
      <p class="text-sm text-red-600">This field is required</p>
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Basic Textarea -->
    <div class="space-y-2">
      <label for="basic-textarea" class="block text-sm font-medium text-gray-700">Message</label>
      <textarea id="basic-textarea" rows="4" placeholder="Enter your message here..." 
        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"></textarea>
      <p class="text-sm text-gray-500">Please provide a detailed description</p>
    </div>

    <!-- Textarea with Fixed Height -->
    <div class="space-y-2">
      <label for="fixed-textarea" class="block text-sm font-medium text-gray-700">Comments</label>
      <textarea id="fixed-textarea" placeholder="Enter your comments here..." 
        class="w-full h-32 px-4 py-2 bg-white border border-gray-300 rounded-md shadow-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea>
      <p class="text-sm text-gray-500">Limited to 200 characters</p>
    </div>

    <!-- Textarea with Counter -->
    <div class="space-y-2">
      <div class="flex justify-between">
        <label for="counter-textarea" class="block text-sm font-medium text-gray-700">Bio</label>
        <span id="char-count" class="text-xs text-gray-500">0/200</span>
      </div>
      <textarea id="counter-textarea" maxlength="200" placeholder="Tell us about yourself..." 
        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"></textarea>
    </div>
  </div>

  <script>
    // Character counter functionality
    const counterTextarea = document.getElementById('counter-textarea');
    const charCount = document.getElementById('char-count');

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

                            <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>