Componente 1 del visor de archivos
Un componente de visor de archivos minimalista diseñado con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros. Muestre archivos con un diseño limpio, incluidos marcadores de posición para imágenes y avatares de usuario.
Código HTML
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="p-6">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Last Updated: 2023-10-01</p>
</div>
</div>
<div class="flex justify-center">
<img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/seed/picsum/400/250" alt="Placeholder Image">
</div>
<div class="mt-4">
<p class="text-gray-700 dark:text-gray-300">File Name: <span class="font-semibold">example-file.pdf</span></p>
<p class="text-gray-700 dark:text-gray-300">File Size: <span class="font-semibold">1.2 MB</span></p>
<p class="text-gray-700 dark:text-gray-300">Uploaded On: <span class="font-semibold">2023-09-25</span></p>
</div>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 text-center">
<button class="bg-blue-500 text-white rounded-md py-2 px-4 transition duration-200 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Download</button>
</div>
</div>Componentes relacionados
Componente Visor de archivos
Un visor de archivos de estilo neumórfico para comercio electrónico que muestra una imagen y detalles del archivo. Proporciona una experiencia de interfaz de usuario suave con soporte para temas oscuros.
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.
Componente Visor de archivos
Un componente de visor de archivos inspirado en Material Design que muestra una lista de archivos con imágenes de vista previa, nombres de archivo, tamaños de archivo y un avatar de usuario. Es compatible con el diseño responsivo y el tema oscuro.