File Input Colors

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Primary Color -->
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-2">Primary</label>
      <input type="file" class="block w-full text-sm text-gray-500
        file:mr-4 file:py-2 file:px-4
        file:rounded-md file:border-0
        file:text-sm file:font-semibold
        file:bg-blue-50 file:text-blue-700
        hover:file:bg-blue-100" />
    </div>
    
    <!-- Secondary Color -->
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-2">Secondary</label>
      <input type="file" class="block w-full text-sm text-gray-500
        file:mr-4 file:py-2 file:px-4
        file:rounded-md file:border-0
        file:text-sm file:font-semibold
        file:bg-purple-50 file:text-purple-700
        hover:file:bg-purple-100" />
    </div>
    
    <!-- Success Color -->
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-2">Success</label>
      <input type="file" class="block w-full text-sm text-gray-500
        file:mr-4 file:py-2 file:px-4
        file:rounded-md file:border-0
        file:text-sm file:font-semibold
        file:bg-green-50 file:text-green-700
        hover:file:bg-green-100" />
    </div>
    
    <!-- Error Color -->
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-2">Error</label>
      <input type="file" class="block w-full text-sm text-gray-500
        file:mr-4 file:py-2 file:px-4
        file:rounded-md file:border-0
        file:text-sm file:font-semibold
        file:bg-red-50 file:text-red-700
        hover:file:bg-red-100" />
    </div>
  </div>
</section>