Componente Visor de archivos
Un componente de visor de archivos con diseño 3D, efectos responsivos y compatibilidad con el modo oscuro.
Código HTML
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg transform transition-transform hover:scale-105 duration-300">
<div class="dark:text-white">
<h2 class="text-xl font-bold mb-4">File Viewer</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
<img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
<h3 class="font-semibold text-gray-800 dark:text-white">Document.pdf</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">1.2 MB</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
<img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
<h3 class="font-semibold text-gray-800 dark:text-white">Image.jpg</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">800 KB</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
<img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
<h3 class="font-semibold text-gray-800 dark:text-white">Video.mp4</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">15 MB</p>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Visor de archivos
Un componente de visor de archivos responsivo diseñado en un estilo brutalista, con soporte para temas oscuros y uso de 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.
Componente Visor de archivos retro
Un componente de visor de archivos complejo y receptivo con una estética retro/vintage de los 80/90, esquema de color neutro cálido, diseñado para interfaces financieras/bancarias. Incluye soporte para modo oscuro y elementos interactivos.