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 stylisé avec les principes de conception matérielle à l’aide de Tailwind CSS, avec prise en charge du thème sombre.
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers simple et réactif avec un design inspiré du papier/de l’impression adapté aux sites Web d’entreprise. Dispose de couleurs analogues, d’un HTML sémantique et d’une prise en charge du mode sombre.
Composant Visionneuse de fichiers
Composant de visionneuse de fichiers réactif avec brutalisme et design pastel