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 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.
Componente Visor de archivos
Un componente de visor de archivos esqueuomórfico con un esquema de color pastel, diseñado para el comercio electrónico, con diseño receptivo y soporte para modo oscuro. Imita una carpeta física con pestañas y un área de contenido.
Componente Visor de archivos
Un componente de visor de archivos con diseño 3D, efectos responsivos y compatibilidad con el modo oscuro.