Componente Visor de archivos
Componente de visor de archivos responsivo con soporte para modo oscuro
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 con una estética industrial y de materiales crudos, que implementa neutros cálidos y soporte de modo oscuro para el consumo de contenido.
Componente Visor de archivos
Un componente de visor de archivos nostálgico inspirado en la estética retro de los años 80/90, diseñado con Tailwind CSS y compatible con efectos responsivos y temas oscuros.
Skeuomorphic_Monochromatic_File_Viewer
Un componente de visor de archivos esqueuomórfico complejo para un mercado, diseñado con un esquema de color monocromático. Incluye una lista de archivos, un panel de vista previa, botones de acción y una sección de información detallada, todo ello sin dejar de responder y ser compatible con el modo oscuro.