Input Colors

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Default Color Input -->
    <div class="space-y-2">
      <label for="default-input" class="block text-sm font-medium text-gray-700">Default</label>
      <input type="text" id="default-input" placeholder="Default input" 
        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" />
    </div>

    <!-- Primary Color Input -->
    <div class="space-y-2">
      <label for="primary-input" class="block text-sm font-medium text-blue-700">Primary</label>
      <input type="text" id="primary-input" placeholder="Primary input" 
        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" />
    </div>

    <!-- Secondary Color Input -->
    <div class="space-y-2">
      <label for="secondary-input" class="block text-sm font-medium text-purple-700">Secondary</label>
      <input type="text" id="secondary-input" placeholder="Secondary input" 
        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" />
    </div>

    <!-- Success Color Input -->
    <div class="space-y-2">
      <label for="success-input" class="block text-sm font-medium text-green-700">Success</label>
      <input type="text" id="success-input" placeholder="Success input" 
        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" />
      <p class="text-sm text-green-600">Input is valid!</p>
    </div>

    <!-- Warning Color Input -->
    <div class="space-y-2">
      <label for="warning-input" class="block text-sm font-medium text-yellow-700">Warning</label>
      <input type="text" id="warning-input" placeholder="Warning input" 
        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" />
      <p class="text-sm text-yellow-600">Please review your input</p>
    </div>

    <!-- Error Color Input -->
    <div class="space-y-2">
      <label for="error-input" class="block text-sm font-medium text-red-700">Error</label>
      <input type="text" id="error-input" placeholder="Error input" 
        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" />
      <p class="text-sm text-red-600">This field is required</p>
    </div>
  </div>
</section>