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 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 de estilo brutalista con diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
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.