Componentes Visor de archivos Componente Visor de archivos

Componente Visor de archivos

Componente de visor de archivos responsivo con soporte para modo oscuro

Vista previa

Código HTML

<div class="bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-700 shadow-lg rounded-lg p-6 w-full max-w-sm">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">File Viewer</h3>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
      </svg>
    </div>
    <div class="space-y-4">
      <div class="flex items-center space-x-3">
        <div class="flex-shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0015.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
          </svg>
        </div>
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Document.pdf</p>
          <p class="text-xs text-gray-500 dark:text-gray-300">1.2 MB</p>
        </div>
        <button class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
       <div class="flex items-center space-x-3">
        <div class="flex-shrink-0">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-500 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
        </div>
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Image.png</p>
          <p class="text-xs text-gray-500 dark:text-gray-300">800 KB</p>
        </div>
        <button class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
       <div class="flex items-center space-x-3">
        <div class="flex-shrink-0">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-500 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 012-2h2a2 2 0 012 2v6m3 0H9m1a1 1 0 00-1 1v2m1-3h0a2 2 0 012-2h2a2 2 0 012 2h0m-5-13V5a2 2 0 012-2h2a2 2 0 012 2v2M6 19a2 2 0 002-2V5a2 2 0 00-2-2H4a2 2 0 00-2 2v12a2 2 0 002 2h2z" />
          </svg>
        </div>
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Archive.zip</p>
          <p class="text-xs text-gray-500 dark:text-gray-300">5.5 MB</p>
        </div>
        <button class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Componentes relacionados

Componente Visor de archivos

Un componente de visor de archivos responsivo diseñado para sitios web de comercio electrónico en modo oscuro con un esquema de color monocromático. Incluye funciones interactivas como la carga de archivos y la vista previa.

Abrir

Componente Visor de archivos

Un componente de visor de archivos complejo y sensible con un diseño inspirado en la Bauhaus que utiliza colores análogos, adecuado para bolsas de trabajo y plataformas de desarrollo profesional. Incluye soporte para modo oscuro.

Abrir

Componente Visor de archivos

Un componente de visor de archivos receptivo para comercio electrónico con diseño 3D, combinación de colores complementaria y diseño simple, compatible con el modo oscuro con Tailwind CSS. Muestra archivos o documentos de productos.

Abrir