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.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5">
<div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-6 w-full max-w-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">File Viewer</h2>
<div class="flex items-center space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-lg">
<div>
<p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Uploaded on April 20, 2023</p>
</div>
</div>
<div class="flex flex-col">
<div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4 mb-4">
<p class="text-gray-700 dark:text-gray-300">File Name: example-document.pdf</p>
<p class="text-gray-600 dark:text-gray-400">File Size: 1.2 MB</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4 mb-4">
<img src="https://picsum.photos/200/100" alt="Preview" class="w-full h-auto rounded-lg shadow-md mb-2">
<p class="text-gray-700 dark:text-gray-300">Preview of the document</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-md focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">Download</button>
</div>
</div>
</div>
</div>Composants associés
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.
Composant Visionneuse de fichiers
Composant de visionneuse de fichiers réactif avec mode sombre
Composant Neumorphism File Viewer
Un composant de visualisation de fichiers de style Neumorphism pour les médias sociaux avec une palette de couleurs complémentaire et une complexité modérée. Il est réactif et prend en charge le thème sombre en utilisant Tailwind CSS.