Textarea Basic

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