Composant Visionneuse de fichiers
Un composant de visualisation de fichiers nostalgique inspiré de l’esthétique rétro des années 80/90, conçu avec Tailwind CSS et prenant en charge les effets réactifs et les thèmes sombres.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
<h2 class="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-white">File Viewer</h2>
<div class="flex flex-col items-center">
<div class="mb-4">
<img src="https://picsum.photos/200/150" alt="File Thumbnail" class="w-full h-auto rounded-lg shadow-md transition-transform duration-300 hover:scale-105" />
</div>
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">File Name: Example Document.pdf</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Uploaded by:</p>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mx-auto" />
<p class="text-sm text-gray-700 dark:text-gray-300">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Uploaded on: June 10, 2023</p>
</div>
<div class="mt-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300">Open File</button>
<button class="ml-2 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-800 dark:text-white font-bold py-2 px-4 rounded transition duration-300">Delete File</button>
</div>
</div>
</div>Composants associés
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers réactif conçu pour les sites Web de commerce électronique en mode sombre avec une palette de couleurs monochromatiques. Il comprend des fonctionnalités interactives telles que le téléchargement et l’aperçu des fichiers.
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
Un composant de visionneuse de fichiers réactif stylisé avec les principes de conception matérielle à l’aide de Tailwind CSS, avec prise en charge du thème sombre.