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 Retro File Viewer
Un composant de visionneuse de fichiers complexe et réactif avec une esthétique rétro/vintage des années 80/90, une palette de couleurs neutres chaudes, conçu pour les interfaces finance/banque. Comprend la prise en charge du mode sombre et des éléments interactifs.
Composant Visionneuse de fichiers
Un composant de visualisation de fichiers complexe et réactif avec un design inspiré du Bauhaus utilisant des couleurs analogues, adapté aux sites d’emploi et aux plateformes de développement de carrière. Inclut la prise en charge du mode sombre.
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers de style Neumorphism conçu avec Tailwind CSS. Il présente un design réactif et une prise en charge du thème sombre.