Tailwind CSS File Input Components

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto">
    <label for="file-upload-preview" class="block text-sm font-medium text-gray-700 mb-2">Upload with preview</label>
    <input 
      id="file-upload-preview" 
      type="file"
      accept="image/*"
      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
        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" />
    <p class="mt-1.5 text-xs text-gray-500">Select an image to preview</p>
    
    <!-- Preview container -->
    <div id="preview-container" class="mt-4 hidden">
      <div class="aspect-w-16 aspect-h-9 bg-gray-100 rounded-lg overflow-hidden">
        <img id="image-preview" src="#" alt="Image Preview" class="w-full h-full object-contain" />
      </div>
      <div class="mt-2 flex items-center justify-between">
        <span id="file-name" class="text-sm text-gray-500"></span>
        <button 
          id="remove-file" 
          type="button" 
          class="text-sm text-red-600 hover:text-red-800">
          Remove
        </button>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const fileInput = document.getElementById('file-upload-preview');
      const previewContainer = document.getElementById('preview-container');
      const imagePreview = document.getElementById('image-preview');
      const fileName = document.getElementById('file-name');
      const removeButton = document.getElementById('remove-file');
      
      fileInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
          const file = this.files[0];
          const reader = new FileReader();
          
          reader.onload = function(e) {
            imagePreview.src = e.target.result;
            fileName.textContent = file.name;
            previewContainer.classList.remove('hidden');
          };
          
          reader.readAsDataURL(file);
        }
      });
      
      removeButton.addEventListener('click', function() {
        fileInput.value = '';
        previewContainer.classList.add('hidden');
        imagePreview.src = '#';
        fileName.textContent = '';
      });
    });
  </script>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto">
    <fieldset class="border border-gray-300 rounded-md p-4">
      <legend class="text-sm font-medium text-gray-700 px-2">Select a file</legend>
      <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
        focus:outline-none" />
      <label class="block mt-2 text-xs text-gray-500">Maximum file size: 10MB</label>
    </fieldset>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Extra Small -->
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-2">Extra Small</label>
      <input type="file" class="block w-full text-xs text-gray-500
        file:mr-2 file:py-1 file:px-2
        file:rounded-md file:border-0
        file:text-xs file:font-semibold
        file:bg-blue-50 file:text-blue-700
        hover:file:bg-blue-100" />
    </div>
    
    <!-- Small -->
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-2">Small</label>
      <input type="file" class="block w-full text-sm text-gray-500
        file:mr-3 file:py-1.5 file:px-3
        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>
    
    <!-- Medium (Default) -->
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-2">Medium (Default)</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>
    
    <!-- Large -->
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-2">Large</label>
      <input type="file" class="block w-full text-base text-gray-500
        file:mr-4 file:py-2.5 file:px-5
        file:rounded-md file:border-0
        file:text-base file:font-semibold
        file:bg-blue-50 file:text-blue-700
        hover:file:bg-blue-100" />
    </div>
    
    <!-- Extra Large -->
    <div>
      <label class="block text-sm font-medium text-gray-700 mb-2">Extra Large</label>
      <input type="file" class="block w-full text-lg text-gray-500
        file:mr-4 file:py-3 file:px-6
        file:rounded-md file:border-0
        file:text-lg file:font-semibold
        file:bg-blue-50 file:text-blue-700
        hover:file:bg-blue-100" />
    </div>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto">
    <label for="file-upload-multiple" class="block text-sm font-medium text-gray-700 mb-2">Upload multiple files</label>
    <input 
      id="file-upload-multiple" 
      type="file"
      multiple
      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
        focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" />
    <p class="mt-1.5 text-xs text-gray-500">You can select multiple files by holding Ctrl/Cmd while selecting</p>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto">
    <label for="file-upload-ghost" class="block text-sm font-medium text-gray-700 mb-2">Ghost Style</label>
    <input 
      id="file-upload-ghost" 
      type="file"
      class="block w-full text-sm text-gray-500 border-0 file:mr-4 file:py-2 file:px-4 file:border file:border-blue-300 file:text-sm file:bg-transparent file:text-blue-700 hover:file:bg-blue-50 focus:outline-none" />
    <p class="mt-1.5 text-xs text-gray-500">Ghost style with transparent background</p>
  </div>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto">
    <label class="block text-sm font-medium text-gray-700 mb-2">Drag & Drop Files</label>
    
    <div 
      id="drop-area" 
      class="border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center bg-gray-50 hover:bg-gray-100 transition cursor-pointer">
      <svg class="w-10 h-10 text-gray-400 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
      </svg>
      <p class="text-sm text-gray-600 mb-1">Drag and drop your files here</p>
      <p class="text-xs text-gray-500 mb-3">or</p>
      <button type="button" id="browse-button" class="text-sm bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
        Browse Files
      </button>
      <input type="file" id="file-input" class="hidden" multiple />
      <p class="text-xs text-gray-500 mt-3">Maximum file size: 10MB</p>
    </div>
    
    <!-- Preview files -->
    <div id="file-list" class="mt-4 space-y-2"></div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const dropArea = document.getElementById('drop-area');
      const fileInput = document.getElementById('file-input');
      const browseButton = document.getElementById('browse-button');
      const fileList = document.getElementById('file-list');
      
      // Highlight drop area when dragging over it
      ['dragenter', 'dragover'].forEach(eventName => {
        dropArea.addEventListener(eventName, function(e) {
          e.preventDefault();
          e.stopPropagation();
          dropArea.classList.add('bg-blue-50', 'border-blue-300');
          dropArea.classList.remove('bg-gray-50', 'border-gray-300');
        }, false);
      });
      
      ['dragleave', 'drop'].forEach(eventName => {
        dropArea.addEventListener(eventName, function(e) {
          e.preventDefault();
          e.stopPropagation();
          dropArea.classList.remove('bg-blue-50', 'border-blue-300');
          dropArea.classList.add('bg-gray-50', 'border-gray-300');
        }, false);
      });
      
      // Handle file drop
      dropArea.addEventListener('drop', function(e) {
        fileInput.files = e.dataTransfer.files;
        updateFileList(e.dataTransfer.files);
      }, false);
      
      // Handle browse button click
      browseButton.addEventListener('click', function() {
        fileInput.click();
      });
      
      // Handle file selection via input
      fileInput.addEventListener('change', function() {
        updateFileList(this.files);
      });
      
      // Display selected files
      function updateFileList(files) {
        fileList.innerHTML = '';
        
        if (files.length === 0) return;
        
        Array.from(files).forEach((file, index) => {
          const fileItem = document.createElement('div');
          fileItem.className = 'flex items-center justify-between bg-gray-100 p-2 rounded-md';
          
          const fileInfo = document.createElement('div');
          fileInfo.className = 'flex items-center';
          
          const fileIcon = document.createElement('div');
          fileIcon.className = 'text-blue-600 mr-2';
          fileIcon.innerHTML = '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>';
          
          const fileName = document.createElement('span');
          fileName.className = 'text-sm text-gray-700 truncate';
          fileName.textContent = file.name;
          
          fileInfo.appendChild(fileIcon);
          fileInfo.appendChild(fileName);
          fileItem.appendChild(fileInfo);
          
          const fileSize = document.createElement('span');
          fileSize.className = 'text-xs text-gray-500';
          fileSize.textContent = formatFileSize(file.size);
          fileItem.appendChild(fileSize);
          
          fileList.appendChild(fileItem);
        });
      }
      
      // Format file size
      function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
      }
    });
  </script>
</section> 
                        

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto">
    <label for="file-upload-disabled" class="block text-sm font-medium text-gray-400 mb-2">Upload file (Disabled)</label>
    <input 
      id="file-upload-disabled" 
      type="file" 
      disabled
      class="block w-full text-sm text-gray-400 cursor-not-allowed
        file:mr-4 file:py-2 file:px-4
        file:rounded-md file:border-0
        file:text-sm file:font-semibold
        file:bg-gray-100 file:text-gray-400
        file:cursor-not-allowed" />
    <p class="mt-1.5 text-xs text-gray-400">This input is currently disabled</p>
  </div>
</section> 
                        

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

                            <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto">
    <label for="file-upload" class="block text-sm font-medium text-gray-700 mb-2">Upload file</label>
    <input id="file-upload" 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
      focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"/>
    <p class="mt-1 text-xs text-gray-500">PDF, DOC, or image files up to 10MB</p>
  </div>
</section>