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.
HTML Code
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="p-6">
<div class="flex items-center mb-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-3">
<p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Last Updated: 2023-10-01</p>
</div>
</div>
<div class="flex justify-center">
<img class="w-full h-48 object-cover rounded-lg" src="https://picsum.photos/seed/picsum/400/250" alt="Placeholder Image">
</div>
<div class="mt-4">
<p class="text-gray-700 dark:text-gray-300">File Name: <span class="font-semibold">example-file.pdf</span></p>
<p class="text-gray-700 dark:text-gray-300">File Size: <span class="font-semibold">1.2 MB</span></p>
<p class="text-gray-700 dark:text-gray-300">Uploaded On: <span class="font-semibold">2023-09-25</span></p>
</div>
</div>
<div class="bg-gray-200 dark:bg-gray-700 p-4 text-center">
<button class="bg-blue-500 text-white rounded-md py-2 px-4 transition duration-200 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Download</button>
</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 Visionneuse de fichiers
Un composant de visionneuse de fichiers skeuomorphe avec une palette de couleurs pastel, conçu pour le commerce électronique, avec une mise en page réactive et une prise en charge du mode sombre. Il imite un dossier physique avec des onglets et une zone de contenu.
Skeuomorphic_Monochromatic_File_Viewer
Composant complexe de visionneuse de fichiers skeuomorphe pour une place de marché, conçu avec une palette de couleurs monochromatiques. Il comprend une liste de fichiers, un volet de prévisualisation, des boutons d’action et une section d’informations détaillées, tout en étant entièrement réactif et en prenant en charge le mode sombre.