Textarea Sizes

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