Composants Visionneuse de fichiers Composant Visionneuse de fichiers

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.

Aperçu

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

Composant de visionneuse de fichiers réactif avec mode sombre

Ouvrir

Composant Neumorphism File Viewer

Un composant de visualisation de fichiers de style Neumorphism pour les médias sociaux avec une palette de couleurs complémentaire et une complexité modérée. Il est réactif et prend en charge le thème sombre en utilisant Tailwind CSS.

Ouvrir

Composant Visionneuse de fichiers

Un composant de visionneuse de fichiers réactif conçu selon les principes de Material Design, avec prise en charge du mode sombre et effets réactifs.

Ouvrir