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.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-6">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-5 w-full max-w-md text-center">
<div class="mb-4 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-700 shadow-inner">
<img class="object-cover w-full h-32" src="https://picsum.photos/400/200" alt="File Preview">
</div>
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">File Name.jpg</h2>
<p class="text-gray-600 dark:text-gray-400">Size: 2.5 MB</p>
<p class="text-gray-600 dark:text-gray-400">Uploaded by: <img class="inline-block w-6 h-6 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar"> John Doe</p>
<div class="mt-4 text-center">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded shadow-md focus:outline-none focus:shadow-outline">Download</button>
</div>
</div>
</div>Composants associés
Composant Visionneuse de fichiers - Musique/Audio
Un composant de visionneuse de fichiers complexe et réactif conçu pour les plateformes musicales et audio, doté d’une esthétique Material Design avec des couleurs vives et la prise en charge du mode sombre.
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.
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.