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
Composant de visionneuse de fichiers réactif avec brutalisme et design pastel
Composant Retro File Viewer
Retro/Vintage File Viewer Composant avec mise en page réactive et prise en charge du thème sombre. Comprend une liste de fichiers avec des icônes et des noms, ainsi qu’une zone de prévisualisation. Utilise des polices et des couleurs de style rétro.
Visionneuse de fichiers Composant 1
Un composant de visualisation de fichiers minimaliste conçu à l’aide de Tailwind CSS, avec des effets réactifs et la prise en charge des thèmes sombres. Affichez des fichiers avec une mise en page épurée, y compris des espaces réservés pour les images et les avatars des utilisateurs.