Textarea Colors

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