Composant Visionneuse de fichiers
Un composant de visualisation de fichiers réactif pour le commerce électronique avec une conception 3D, une palette de couleurs complémentaire et une mise en page simple, prenant en charge le mode sombre à l’aide de Tailwind CSS. Il affiche des fiches ou des documents sur les produits.
HTML Code
<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>Composants associés
Composant Visionneuse de fichiers
Un composant de visualisation de fichiers complexe et réactif avec un design inspiré du Bauhaus utilisant des couleurs analogues, adapté aux sites d’emploi et aux plateformes de développement de carrière. Inclut la prise en charge du mode sombre.
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers de style brutaliste avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers de conception minimaliste et plat adapté à la visualisation de données dans un tableau de bord avec une palette de couleurs monochromatiques et la prise en charge du thème sombre.