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.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-6">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-5 w-full max-w-md text-center">
<div class="mb-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 shadow-inner">
<img class="object-cover w-full h-32" src="https://picsum.photos/400/200" alt="File Preview">
</div>
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">File Name.jpg</h2>
<p class="text-gray-600 dark:text-gray-400">Size: 2.5 MB</p>
<p class="text-gray-600 dark:text-gray-400">Uploaded by: <img class="inline-block w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar"> John Doe</p>
<div class="mt-4 text-center">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded shadow-md focus:outline-none focus:shadow-outline">Download</button>
</div>
</div>
</div>Componentes relacionados
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 responsivo diseñado con los principios de Material Design utilizando Tailwind CSS, con soporte para temas oscuros.
Componente Visor de archivos
Un componente de visor de archivos receptivo para comercio electrónico con diseño 3D, combinación de colores complementaria y diseño simple, compatible con el modo oscuro con Tailwind CSS. Muestra archivos o documentos de productos.