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.
Código HTML
<div class="container mx-auto p-4">
<!-- Optional: Add a subtle 3D container effect -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 relative overflow-hidden">
<!-- Complementary Color Accent (Example: Orange and Blue) -->
<div class="absolute top-0 left-0 w-1/4 h-full bg-orange-500 dark:bg-orange-700 opacity-20"></div>
<div class="absolute top-0 right-0 w-1/4 h-full bg-blue-500 dark:bg-blue-700 opacity-20"></div>
<h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Product Files</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- File Item 1 -->
<div class="border border-gray-200 dark:border-gray-700 rounded-md p-4 flex items-center space-x-4 relative group">
<!-- Subtle 3D effect on hover -->
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-gray-200 dark:to-gray-700 opacity-0 group-hover:opacity-50 transition-opacity duration-300"></div>
<svg class="h-8 w-8 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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 class="flex-1">
<p class="text-gray-700 dark:text-gray-300 font-medium">Product_Guide.pdf</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">2.5MB</p>
</div>
<a href="#" class="text-orange-600 dark:text-orange-400 hover:underline text-sm">Download</a>
</div>
<!-- File Item 2 -->
<div class="border border-gray-200 dark:border-gray-700 rounded-md p-4 flex items-center space-x-4 relative group">
<!-- Subtle 3D effect on hover -->
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-gray-200 dark:to-gray-700 opacity-0 group-hover:opacity-50 transition-opacity duration-300"></div>
<svg class="h-8 w-8 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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 class="flex-1">
<p class="text-gray-700 dark:text-gray-300 font-medium">Specifications.docx</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">0.8MB</p>
</div>
<a href="#" class="text-orange-600 dark:text-orange-400 hover:underline text-sm">Download</a>
</div>
<!-- File Item 3 -->
<div class="border border-gray-200 dark:border-gray-700 rounded-md p-4 flex items-center space-x-4 relative group">
<!-- Subtle 3D effect on hover -->
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-gray-200 dark:to-gray-700 opacity-0 group-hover:opacity-50 transition-opacity duration-300"></div>
<svg class="h-8 w-8 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<div class="flex-1">
<p class="text-gray-700 dark:text-gray-300 font-medium"> high_res_image.jpg</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">5.1MB</p>
</div>
<a href="#" class="text-orange-600 dark:text-orange-400 hover:underline text-sm">Download</a>
</div>
</div>
</div>
</div>Componentes relacionados
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 complejo y receptivo con una interfaz de usuario de modo oscuro y tonos tierra, diseñado para aplicaciones deportivas y de fitness. Secciones de lista de archivos, vista previa y detalles de características.
Componente Visor de archivos
Un componente de visor de archivos de estilo brutalista con diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.