Composant Visionneuse de fichiers
Un composant de visualisation de fichiers réactif conçu dans un style brutaliste, avec la prise en charge du thème sombre et utilisant Tailwind CSS.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-900 border border-gray-400 dark:border-gray-700 rounded-lg shadow-lg p-6 w-full max-w-3xl">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">File Viewer</h1>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-12 w-12 border-2 border-gray-600">
<span class="ml-3 text-xl font-medium text-gray-800 dark:text-white">Uploaded by John Doe</span>
</div>
<div class="flex mb-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">File: Project Report.pdf</h2>
<div class="ml-auto text-lg font-semibold text-gray-600 dark:text-gray-300">10 MB</div>
</div>
<p class="text-gray-600 dark:text-gray-300 mb-6">
This document contains a detailed report on project progress and future milestones. Please review it carefully.
</p>
<img src="https://picsum.photos/600/400" alt="Placeholder Image" class="rounded-md mb-4">
<div class="flex justify-between">
<button class="bg-gray-800 text-white font-bold py-2 px-4 rounded hover:bg-gray-600 transition duration-200">Download</button>
<button class="bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded hover:bg-gray-400 transition duration-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Delete</button>
</div>
</div>
</div>Composants associés
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.
Composant Visionneuse de fichiers
Un composant de visualisation de fichiers rétro/vintage conçu pour les applications de commerce électronique. Il dispose d’une palette de couleurs monochromatiques, d’un design réactif et de la prise en charge du mode sombre.
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.