Composant Visionneuse de fichiers
Composant de visionneuse de fichiers inspiré de Material Design qui affiche une liste de fichiers avec des images d’aperçu, des noms de fichiers, des tailles de fichiers et un avatar utilisateur. Il prend en charge le design réactif et le thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-lg mx-auto">
<h2 class="text-xl font-semibold mb-4">File Viewer</h2>
<div class="grid grid-cols-1 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
<img src="https://picsum.photos/100/100?random=1" alt="File Preview" class="w-16 h-16 rounded mr-4" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 1</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">2.3 MB</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
<img src="https://picsum.photos/100/100?random=2" alt="File Preview" class="w-16 h-16 rounded mr-4" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 2</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">1.5 MB</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
<img src="https://picsum.photos/100/100?random=3" alt="File Preview" class="w-16 h-16 rounded mr-4" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 3</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">500 KB</p>
</div>
</div>
</div>
</div>Composants associés
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.
Composant Visionneuse de fichiers
Composant de visionneuse de fichiers réactif avec prise en charge du mode sombre
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.