Componente Visualizzatore file
Un componente visualizzatore di file reattivo per l'e-commerce con design 3D, combinazione di colori complementari e layout semplice, che supporta la modalità oscura utilizzando Tailwind CSS. Visualizza i file o i documenti dei prodotti.
Codice 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>Componenti correlati
Componente Visualizzatore file
Un componente di visualizzazione file reattivo con un'estetica industriale delle materie prime, che implementa neutri caldi e supporto della modalità scura per il consumo di contenuti.
Componente Visualizzatore file
Componente visualizzatore file reattivo con supporto per la modalità oscura
Componente Visualizzatore file
Un componente visualizzatore di file reattivo progettato secondo i principi di Material Design, con supporto per la modalità oscura ed effetti reattivi.