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 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.
Composant Visionneuse de fichiers
Visionneuse de fichiers de style neumorphique pour le commerce électronique qui affiche une image et les détails d’un fichier. Fournit une expérience d’interface utilisateur douce avec prise en charge du thème sombre.
Composant Visionneuse de fichiers
Un composant de visualisation de fichiers réactif pour le commerce électronique avec une conception 3D, une palette de couleurs complémentaire et une mise en page simple, prenant en charge le mode sombre à l’aide de Tailwind CSS. Il affiche des fiches ou des documents sur les produits.