Visionneuse de fichiers

Composant Visionneuse de fichiers

Un composant de visualisation de fichiers rétro/vintage conçu pour les applications de commerce électronique. Il dispose d’une palette de couleurs monochromatiques, d’un design réactif et de la prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-white text-2xl font-bold text-center mb-4">File Viewer</h2>
    <div class="space-y-4">
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">File Name</h3>
            <p class="text-gray-300 dark:text-gray-400">example_file.pdf</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">Uploaded By</h3>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <p class="text-gray-300 dark:text-gray-400">John Doe</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">File Preview</h3>
            <img src="https://picsum.photos/200/100" alt="File Preview" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">Actions</h3>
            <button class="w-full bg-gray-600 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 text-white py-2 px-4 rounded transition duration-150 ease-in-out">Download</button>
            <button class="w-full bg-gray-600 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 text-white py-2 px-4 rounded transition duration-150 ease-in-out">Delete</button>
        </div>
    </div>
</div>

Composant Visionneuse de fichiers

Un composant de visionneuse de fichiers réactif conçu pour les sites Web de commerce électronique en mode sombre avec une palette de couleurs monochromatiques. Il comprend des fonctionnalités interactives telles que le téléchargement et l’aperçu des fichiers.

Ouvrir l’aperçu

                <div class="bg-gray-800 text-gray-200 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-semibold mb-4">File Viewer</h2>
    <div class="mb-4">
        <label class="block mb-2">Upload File:</label>
        <input type="file" class="bg-gray-900 text-gray-200 p-2 border border-gray-600 rounded w-full" />
    </div>
    <div class="mt-4">
        <h3 class="text-xl mb-2">File Preview:</h3>
        <div class="bg-gray-700 p-4 rounded">
            <img src="https://picsum.photos/300/200" alt="Preview" class="w-full rounded" />
        </div>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2" />
            <div>
                <span class="font-bold">Uploaded by:</span> John Doe
            </div>
        </div>
    </div>
    <div class="mt-4">
        <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
            Confirm Upload
        </button>
    </div>
</div>

Composant Brutalist File Viewer

Un composant de visionneuse de fichiers brut et audacieux avec des principes de conception brutalistes. Présente un contraste élevé, une disposition non conventionnelle et des éléments intentionnellement grossiers. Le composant comprend l’aperçu des fichiers, l’affichage des métadonnées et les boutons d’action dans un schéma de couleurs en niveaux de gris austère. Entièrement réactif avec prise en charge du mode sombre à l’aide des classes utilitaires Tailwind CSS dark :. Convient aux sites Web d’entreprise/d’entreprise à la recherche d’une approche visuelle distinctive.

Ouvrir l’aperçu

                <!-- Brutalist File Viewer Component -->
<div class="w-full bg-white dark:bg-gray-900 border-4 border-black dark:border-gray-700 p-4 md:p-6 font-mono">
  <!-- Component Header -->
  <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 border-b-8 border-black dark:border-gray-700 pb-4">
    <h2 class="text-3xl md:text-4xl font-black uppercase tracking-tighter text-black dark:text-white">FILE VIEWER</h2>
    <div class="mt-3 md:mt-0 bg-black dark:bg-gray-800 text-white dark:text-gray-200 px-4 py-2 text-sm tracking-widest">
      FILES: <span class="font-bold">14</span> | STORAGE: <span class="font-bold">64%</span>
    </div>
  </div>

  <!-- File Grid -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Featured File - Takes up more space -->
    <div class="col-span-1 md:col-span-2 border-4 border-black dark:border-gray-700 flex flex-col">
      <div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
        <span class="font-bold uppercase tracking-wider">QUARTERLY_REPORT.PDF</span>
        <span class="text-xs bg-white text-black dark:bg-gray-600 dark:text-white px-2 py-1">PINNED</span>
      </div>
      <div class="h-64 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
        <img src="https://picsum.photos/800/500" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
        <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-40 dark:opacity-60"></div>
        <div class="absolute bottom-0 left-0 w-full p-3 text-white">
          <div class="mb-1 text-xl font-bold uppercase">Q4 Financial Report</div>
          <div class="text-sm opacity-80">Last modified: Yesterday at 14:23</div>
        </div>
      </div>
      <div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
        <div class="flex items-center space-x-1">
          <span class="inline-block w-3 h-3 bg-black dark:bg-white rounded-full"></span>
          <span class="text-xs text-black dark:text-gray-200">12.4 MB</span>
        </div>
        <div class="flex space-x-2">
          <button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-4 py-2 text-xs uppercase tracking-wider font-bold">Open</button>
          <button class="bg-white dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 text-black dark:text-white border-2 border-black dark:border-gray-700 px-4 py-2 text-xs uppercase tracking-wider font-bold">Download</button>
        </div>
      </div>
    </div>

    <!-- Standard File Cards -->
    <div class="border-4 border-black dark:border-gray-700">
      <div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
        <span class="font-bold uppercase tracking-wider">PRESENTATION.PPTX</span>
      </div>
      <div class="h-48 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
        <img src="https://picsum.photos/600/400" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
      </div>
      <div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
        <div class="text-xs text-black dark:text-gray-200">5.7 MB</div>
        <button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-3 py-1 text-xs uppercase tracking-wider font-bold">View</button>
      </div>
    </div>

    <div class="border-4 border-black dark:border-gray-700">
      <div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
        <span class="font-bold uppercase tracking-wider">BUDGET_2023.XLSX</span>
      </div>
      <div class="h-48 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
        <img src="https://picsum.photos/601/400" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
      </div>
      <div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
        <div class="text-xs text-black dark:text-gray-200">3.2 MB</div>
        <button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-3 py-1 text-xs uppercase tracking-wider font-bold">View</button>
      </div>
    </div>

    <div class="border-4 border-black dark:border-gray-700">
      <div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
        <span class="font-bold uppercase tracking-wider">LOGO_FINALS.ZIP</span>
      </div>
      <div class="h-48 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
        <img src="https://picsum.photos/602/400" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
      </div>
      <div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
        <div class="text-xs text-black dark:text-gray-200">8.9 MB</div>
        <button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-3 py-1 text-xs uppercase tracking-wider font-bold">View</button>
      </div>
    </div>
  </div>

  <!-- Shared Users Section -->
  <div class="mt-8 border-t-4 border-black dark:border-gray-700 pt-4">
    <h3 class="text-xl font-black uppercase tracking-tight text-black dark:text-white mb-4">SHARED WITH</h3>
    <div class="flex flex-wrap items-center gap-4">
      <div class="flex items-center border-4 border-black dark:border-gray-700 p-2 bg-white dark:bg-gray-800">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar" class="w-10 h-10 object-cover grayscale">
        <div class="ml-2">
          <div class="text-sm font-bold text-black dark:text-white">K. JOHNSON</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">EDITOR</div>
        </div>
      </div>
      <div class="flex items-center border-4 border-black dark:border-gray-700 p-2 bg-white dark:bg-gray-800">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 object-cover grayscale">
        <div class="ml-2">
          <div class="text-sm font-bold text-black dark:text-white">T. WILLIAMS</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">VIEWER</div>
        </div>
      </div>
      <div class="flex items-center border-4 border-black dark:border-gray-700 p-2 bg-white dark:bg-gray-800">
        <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User avatar" class="w-10 h-10 object-cover grayscale">
        <div class="ml-2">
          <div class="text-sm font-bold text-black dark:text-white">S. DAVIS</div>
          <div class="text-xs text-gray-600 dark:text-gray-400">ADMIN</div>
        </div>
      </div>
      <button class="bg-black dark:bg-gray-700 text-white text-sm px-4 py-3 uppercase tracking-wider font-bold hover:bg-gray-800 dark:hover:bg-gray-600">
        + ADD USER
      </button>
    </div>
  </div>

  <!-- Bottom Controls -->
  <div class="mt-8 flex flex-col md:flex-row justify-between items-start md:items-center border-t-8 border-black dark:border-gray-700 pt-4">
    <div class="flex flex-col mb-4 md:mb-0">
      <span class="text-xs uppercase tracking-wider text-gray-600 dark:text-gray-400 font-bold">Storage Usage</span>
      <div class="w-48 h-8 border-4 border-black dark:border-gray-700 mt-1 overflow-hidden">
        <div class="bg-black dark:bg-gray-600 h-full w-2/3"></div>
      </div>
    </div>
    <div class="flex gap-3">
      <button class="bg-white dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-black dark:text-white border-4 border-black dark:border-gray-700 px-6 py-3 text-sm uppercase tracking-widest font-bold">
        UPLOAD NEW
      </button>
      <button class="bg-black dark:bg-gray-700 hover:bg-gray-800 dark:hover:bg-gray-600 text-white px-6 py-3 text-sm uppercase tracking-widest font-bold">
        MANAGE ALL
      </button>
    </div>
  </div>
</div>

Composant Visionneuse de fichiers

Composant de visionneuse de fichiers réactif avec mode sombre

Ouvrir l’aperçu

                <div class="bg-gray-900 p-8">
  <div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg overflow-hidden md:max-w-lg">
    <div class="md:flex">
      <div class="w-full p-4">
        <div class="flex justify-between items-center">
          <h2 class="text-gray-200 font-semibold text-xl">Files</h2>
          <button class="text-gray-400 hover:text-gray-200 focus:outline-none">
            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
          </button>
        </div>
        <div class="mt-4">
          <div class="flex items-center justify-between py-3 border-b border-gray-700 last:border-b-0">
            <div class="flex items-center">
              <svg class="h-6 w-6 text-blue-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 010-4H7l-3-4v-5a2 2 012-2h4l2 2h5a2 2 012 2v6m-11 5H4"></path>
              </svg>
              <span class="text-gray-300">Document.pdf</span>
            </div>
            <span class="text-gray-500 text-sm">2.3MB</span>
          </div>
          <div class="flex items-center justify-between py-3 border-b border-gray-700 last:border-b-0">
            <div class="flex items-center">
              <svg class="h-6 w-6 text-green-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 001-2 2h-4a2 2 001-2 2v6m3 2a2 2 010-4 2 2 010 4zm-6 0a2 2 010-4 2 2 010 4z"></path>
              </svg>
              <span class="text-gray-300">Spreadsheet.xlsx</span>
            </div>
            <span class="text-gray-500 text-sm">1.1MB</span>
          </div>
           <div class="flex items-center justify-between py-3 border-b border-gray-700 last:border-b-0">
            <div class="flex items-center">
              <svg class="h-6 w-6 text-purple-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 001 21.072 13V6.93a1 1 001-.776-1.609l-4.553-2.276A1 1 000 4.63v14.74c0 .426.49.64 1.06-.33L15 14v-4zm6 5a2 2 011-4 2 2 011 4zm-6 0a2 2 011-4 2 2 011 4z"></path>
              </svg>
              <span class="text-gray-300">Presentation.pptx</span>
            </div>
            <span class="text-gray-500 text-sm">4.5MB</span>
          </div>
           <div class="flex items-center justify-between py-3 border-b border-gray-700 last:border-b-0">
            <div class="flex items-center">
              <svg class="h-6 w-6 text-red-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 001.414 0L14 16m-2-6l-2 2m2 2l2-2m2-2l-2-2m2 2l-2-2m-2 2l-2-2"></path>
              </svg>
              <span class="text-gray-300">Image.jpg</span>
            </div>
            <span class="text-gray-500 text-sm">7.8MB</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Composant Visionneuse de fichiers

Visionneuse de fichiers de style neumorphique pour le commerce électronique qui affiche une image et les détails d’un fichier. Fournit une expérience d’interface utilisateur douce avec prise en charge du thème sombre.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-6">
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-5 w-full max-w-md text-center">
        <div class="mb-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 shadow-inner">
            <img class="object-cover w-full h-32" src="https://picsum.photos/400/200" alt="File Preview">
        </div>
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">File Name.jpg</h2>
        <p class="text-gray-600 dark:text-gray-400">Size: 2.5 MB</p>
        <p class="text-gray-600 dark:text-gray-400">Uploaded by: <img class="inline-block w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar"> John Doe</p>
        <div class="mt-4 text-center">
            <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded shadow-md focus:outline-none focus:shadow-outline">Download</button>
        </div>
    </div>
</div>

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.

Ouvrir l’aperçu

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
  <h2 class="text-xl text-gray-100 dark:text-gray-200 mb-4">File Viewer</h2>
  <div class="flex flex-col md:flex-row justify-between mb-4">
    <div class="w-full md:w-2/3">
      <img src="https://picsum.photos/600/400" alt="File Preview" class="rounded-lg">
    </div>
    <div class="w-full md:w-1/3 md:ml-4">
      <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow">
        <h3 class="text-lg text-gray-200 dark:text-gray-300 mb-2">File Details</h3>
        <p class="text-gray-300 dark:text-gray-400">Name: Example File.pdf</p>
        <p class="text-gray-300 dark:text-gray-400">Size: 2.5 MB</p>
        <p class="text-gray-300 dark:text-gray-400">Date: 2023-10-05</p>
        <div class="mt-4">
          <button class="bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg">Download</button>
          <button class="bg-red-600 hover:bg-red-500 text-white font-semibold py-2 px-4 rounded-lg ml-2">Delete</button>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-col"> 
    <h3 class="text-lg text-gray-200 dark:text-gray-300 mb-2">Comments</h3>
    <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow mb-4">
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div>
          <h4 class="text-gray-300 dark:text-gray-400">John Doe</h4>
          <p class="text-gray-400 dark:text-gray-500">Great file!</p>
        </div>
      </div>
    </div>
    <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow mb-4">
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div>
          <h4 class="text-gray-300 dark:text-gray-400">Jane Doe</h4>
          <p class="text-gray-400 dark:text-gray-500">Thanks for sharing!</p>
        </div>
      </div>
    </div>
    <div class="flex mb-2">
      <input type="text" placeholder="Add a comment..." class="flex-grow border border-gray-600 bg-gray-700 dark:bg-gray-800 text-gray-200 dark:text-gray-300 rounded-lg py-2 px-4 mr-2" />
      <button class="bg-green-500 hover:bg-green-400 text-white font-semibold py-2 px-4 rounded-lg">Post</button>
    </div>
  </div>
</div>

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 l’aperçu

                <div class="p-6 max-w-sm mx-auto bg-gray-100 dark:bg-gray-800 rounded-xl shadow-lg space-y-4">
  <div class="flex items-center space-x-4">
    <div class="flex-shrink-0">
      <svg class="h-12 w-12 text-teal-500 dark:text-teal-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-5m0 0V5c0-1.1.9-2 2-2h2a2 2 0 012 2v5m0 0v5a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
    </div>
    <div class="flex-grow">
      <div class="text-xl font-medium text-black dark:text-white">Document.pdf</div>
      <p class="text-gray-500 dark:text-gray-400">1.5 MB</p>
    </div>
  </div>
  <div class="flex justify-between items-center">
    <button class="px-4 py-2 text-sm text-blue-600 dark:text-blue-300 font-semibold rounded-full border border-transparent bg-blue-200 dark:bg-blue-700 hover:bg-blue-300 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Download</button>
    <button class="px-4 py-2 text-sm text-red-600 dark:text-red-300 font-semibold rounded-full border border-transparent bg-red-200 dark:bg-red-700 hover:bg-red-300 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">Delete</button>
  </div>
  <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5">
    <div class="bg-teal-500 dark:bg-teal-300 h-2.5 rounded-full" style="width: 50%"></div>
  </div>
</div>

<style>
  .shadow-lg {
    box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
  }
  .dark .shadow-lg {
    box-shadow: 7px 7px 15px #6b6b6b, -7px -7px 15px #a1a1a1;
  }
</style>

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.

Ouvrir l’aperçu

                <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>

Composant Visionneuse de fichiers

Composant de visionneuse de fichiers réactif avec prise en charge du mode sombre

Ouvrir l’aperçu

                
<div class="container mx-auto p-6">

  <!-- File Header -->
  <div class="flex items-center justify-between mb-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">File Viewer</h2>
    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
      <button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 focus:outline-none">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
      </button>
    </div>
  </div>

  <!-- File List -->
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">

    <!-- File Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
      <div class="p-4">
        <div class="flex items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-5m3 5v-5m3 5v-5M9 8h6m-be 4h6m-3-4a3 3 0 01-3-3V4a3 3 0 013-3h2a3 3 0 013 3v1a3 3 0 01-3 3h-2a3 3 0 01-3-3z" />
          </svg>
          <div>
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Document.pdf</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400">1.2 MB</p>
          </div>
        </div>
      </div>
      <div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
        <button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">Download</button>
      </div>
    </div>

    <!-- File Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <div class="p-4">
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
            </svg>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Image.png</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">800 KB</p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
          <button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">View</button>
        </div>
      </div>

    <!-- File Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <div class="p-4">
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-7.072a9 9 0 010 12.728m-9.193-2.829a5 5 0 010-7.072M6.343 4.515a9 9 0 010 12.728M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
            </svg>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Audio.mp3</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">3.5 MB</p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
          <button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">Listen</button>
        </div>
      </div>

    <!-- File Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <div class="p-4">
          <div class="flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h18M3 16h18" />
            </svg>
            <div>
              <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Video.mp4</h3>
              <p class="text-sm text-gray-600 dark:text-gray-400">15 MB</p>
            </div>
          </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
          <button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">Watch</button>
        </div>
      </div>

  </div>

</div>

Composant Visionneuse de fichiers

Composant de visionneuse de fichiers réactif avec prise en charge du mode sombre

Ouvrir l’aperçu

                <div class="bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-700 shadow-lg rounded-lg p-6 w-full max-w-sm">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">File Viewer</h3>
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
      </svg>
    </div>
    <div class="space-y-4">
      <div class="flex items-center space-x-3">
        <div class="flex-shrink-0">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0015.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
          </svg>
        </div>
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Document.pdf</p>
          <p class="text-xs text-gray-500 dark:text-gray-300">1.2 MB</p>
        </div>
        <button class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
       <div class="flex items-center space-x-3">
        <div class="flex-shrink-0">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-500 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
        </div>
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Image.png</p>
          <p class="text-xs text-gray-500 dark:text-gray-300">800 KB</p>
        </div>
        <button class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
       <div class="flex items-center space-x-3">
        <div class="flex-shrink-0">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-500 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 19v-6a2 2 0 012-2h2a2 2 0 012 2v6m3 0H9m1a1 1 0 00-1 1v2m1-3h0a2 2 0 012-2h2a2 2 0 012 2h0m-5-13V5a2 2 0 012-2h2a2 2 0 012 2v2M6 19a2 2 0 002-2V5a2 2 0 00-2-2H4a2 2 0 00-2 2v12a2 2 0 002 2h2z" />
          </svg>
        </div>
        <div class="flex-1">
          <p class="text-sm font-medium text-gray-900 dark:text-white">Archive.zip</p>
          <p class="text-xs text-gray-500 dark:text-gray-300">5.5 MB</p>
        </div>
        <button class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

Catégories