Composant Visionneuse de fichiers
Un composant de visualisation de fichiers avec conception 3D, effets réactifs et prise en charge du mode sombre.
HTML Code
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg transform transition-transform hover:scale-105 duration-300">
<div class="dark:text-white">
<h2 class="text-xl font-bold mb-4">File Viewer</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
<img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
<h3 class="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 class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
<img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
<h3 class="font-semibold text-gray-800 dark:text-white">Image.jpg</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">800 KB</p>
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
<img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
<h3 class="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>Composants associés
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers réactif avec une esthétique industrielle et des matériaux bruts, mettant en œuvre des neutres chauds et une prise en charge du mode sombre pour la consommation de contenu.
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.
Composant Visionneuse de fichiers
Un composant de visualisation de fichiers réactif avec le style Material Design et la prise en charge du mode sombre à l’aide de Tailwind CSS. Le composant affiche une liste de fichiers avec des icônes, des noms, des tailles et des dates de modification.