Composant Visionneuse de fichiers
Composant de visionneuse de fichiers réactif avec mode sombre
HTML Code
<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>Composants associés
Composant Visionneuse de fichiers
Un composant de visualisation de fichiers nostalgique inspiré de l’esthétique rétro des années 80/90, conçu avec Tailwind CSS et prenant en charge les effets réactifs et les thèmes sombres.
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.
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.