Componente Visor de archivos
Un componente de visor de archivos interactivo con estilo de Material Design y compatibilidad con el modo oscuro mediante Tailwind CSS. El componente muestra una lista de archivos con iconos, nombres, tamaños y fechas de modificación.
Código HTML
<div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">File Viewer</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Size</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Modified</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-6 w-6">
<svg class="h-6 w-6 text-gray-400 dark:text-gray-500" 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="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">document.pdf</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-gray-300">1.5 MB</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-gray-300">2023-10-27</div>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-6 w-6">
<svg class="h-6 w-6 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 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" />
</svg>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">image.png</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-gray-300">850 KB</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-gray-300">2023-10-26</div>
</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-6 w-6">
<svg class="h-6 w-6 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.10029 14.8997C4.22386 13.6134 3.81964 12.0664 3.97581 10.5151C4.13198 8.96377 4.84178 7.53822 5.97267 6.40733C7.10356 5.27644 8.52911 4.56664 10.0804 4.41047C11.6317 4.2543 13.1786 4.65851 14.4649 5.53494L16.3849 3.61494C14.7782 2.47673 12.9008 1.92559 10.9819 2.04503C9.06292 2.16446 7.25865 2.94219 5.86696 4.21745C4.47527 5.49271 3.58024 7.18303 3.31396 9.00109C3.04769 10.8191 3.42494 12.7003 4.38029 14.2997L5.10029 14.8997ZM18.8997 9.10029C19.7761 10.3866 20.1804 11.9336 20.0242 13.4849C19.868 15.0362 19.1582 16.4618 18.0273 17.5927C16.8964 18.7236 15.4709 19.4334 13.9196 19.5895C12.3683 19.7457 10.8214 19.3415 9.53506 18.4651L7.61506 20.3851C9.2218 21.5233 11.0992 22.0744 13.0181 21.955C14.9371 21.8355 16.7413 21.0578 18.133 19.7825C19.5247 18.5073 20.4198 16.817 20.686 14.9989C20.9523 13.1809 20.5751 11.2997 19.62 9.70029L18.8997 9.10029Z" stroke="#4B5563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">archive.zip</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-gray-300">5.2 MB</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900 dark:text-gray-300">2023-10-25</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>Componentes relacionados
Componente Visor de archivos retro
Componente de visor de archivos retro / vintage con diseño receptivo y soporte de tema oscuro. Incluye una lista de archivos con iconos y nombres, y un área de vista previa. Utiliza fuentes y colores de estilo retro.
Componente Visor de archivos de neumorfismo
Un componente de visor de archivos de estilo neumorfismo para redes sociales con un esquema de color complementario y complejidad moderada. Es responsivo y admite el tema oscuro usando Tailwind CSS.
Componente Visor de archivos brutalista
Un componente de visor de archivos en bruto y audaz con principios de diseño brutalistas. Presenta alto contraste, diseño poco convencional y elementos intencionalmente crudos. El componente incluye vista previa de archivos, visualización de metadatos y botones de acción en un esquema de color en escala de grises. Totalmente responsivo con soporte de modo oscuro usando Tailwind CSS dark: clases de utilidad. Adecuado para sitios web comerciales / corporativos que buscan un enfoque visual distintivo.