Composant Visionneuse de fichiers
Composant de visionneuse de fichiers réactif avec brutalisme et design pastel
HTML Code
<div class="bg-pink-100 dark:bg-gray-800 min-h-screen font-mono">
<div class="container mx-auto p-4 lg:p-8">
<div class="bg-white dark:bg-gray-900 shadow-xl border-4 border-black dark:border-gray-700 transform -rotate-2 hover:rotate-0 transition-transform duration-300">
<div class="border-b-4 border-black dark:border-gray-700 px-6 py-4 flex justify-between items-center bg-yellow-200 dark:bg-yellow-700">
<h2 class="text-2xl font-bold text-black dark:text-white">File: document.pdf</h2>
<span class="text-sm text-gray-700 dark:text-gray-300">Size: 1.2 MB</span>
</div>
<div class="p-6">
<div class="border-2 border-dashed border-gray-400 dark:border-gray-600 p-8 text-center text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800">
<p class="mb-4">Content preview unavailable for this file type.</p>
<svg class="mx-auto h-12 w-12 text-gray-500 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
</svg>
</div>
<div class="mt-6 border-t-4 border-black dark:border-gray-700 pt-6">
<h3 class="text-xl font-bold mb-4 text-black dark:text-white">File Details</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-800 dark:text-gray-200">
<div><strong>Type:</strong> PDF Document</div>
<div><strong>Date Uploaded:</strong> 2023-10-27</div>
<div><strong>Author:</strong> John Doe</div>
<div><strong>Last Modified:</strong> 2023-10-27</div>
</div>
</div>
<div class="mt-6 border-t-4 border-black dark:border-gray-700 pt-6">
<h3 class="text-xl font-bold mb-4 text-black dark:text-white">Actions</h3>
<div class="flex space-x-4">
<button class="bg-blue-500 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-500 text-white font-bold py-2 px-4 border-b-4 border-black dark:border-gray-900 hover:border-gray-600 dark:hover:border-gray-600 rounded-none transform -skew-x-6 hover:skew-x-0 transition-transform duration-300">Download</button>
<button class="bg-green-500 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-500 text-white font-bold py-2 px-4 border-b-4 border-black dark:border-gray-900 hover:border-gray-600 dark:hover:border-gray-600 rounded-none transform skew-x-6 hover:skew-x-0 transition-transform duration-300">Share</button>
<button class="bg-red-500 dark:bg-red-700 hover:bg-red-700 dark:hover:bg-red-500 text-white font-bold py-2 px-4 border-b-4 border-black dark:border-gray-900 hover:border-gray-600 dark:hover:border-gray-600 rounded-none transform -rotate-3 hover:rotate-0 transition-transform duration-300">Delete</button>
</div>
</div>
<div class="mt-6 border-t-4 border-black dark:border-gray-700 pt-6">
<h3 class="text-xl font-bold mb-4 text-black dark:text-white">Comments</h3>
<div class="space-y-4">
<div class="bg-gray-100 dark:bg-gray-700 p-4 border-2 border-black dark:border-gray-600 transform rotate-1 hover:rotate-0 transition-transform duration-300">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full mr-4 border-2 border-black dark:border-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div class="text-sm">
<div class="font-bold text-black dark:text-white">Commenter Name</div>
<div class="text-gray-600 dark:text-gray-400 text-xs">2 hours ago</div>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200">This is a sample comment on the file. The Brutalist design elements make it stand out!</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 border-2 border-black dark:border-gray-600 transform -rotate-1 hover:rotate-0 transition-transform duration-300">
<div class="flex items-center mb-2">
<img class="w-10 h-10 rounded-full mr-4 border-2 border-black dark:border-gray-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<div class="text-sm">
<div class="font-bold text-black dark:text-white">Another Commenter</div>
<div class="text-gray-600 dark:text-gray-400 text-xs">1 hour ago</div>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200">The pastel colors are a nice touch with the brutalist style.</p>
</div>
</div>
<div class="mt-4">
<textarea class="w-full p-4 border-2 border-black dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 font-mono" rows="4" placeholder="Add a comment..."></textarea>
<button class="mt-2 bg-purple-500 dark:bg-purple-700 hover:bg-purple-700 dark:hover:bg-purple-500 text-white font-bold py-2 px-4 border-b-4 border-black dark:border-gray-900 hover:border-gray-600 dark:hover:border-gray-600 rounded-none transform skew-y-3 hover:skew-y-0 transition-transform duration-300">Post Comment</button>
</div>
</div>
</div>
</div>
</div>
</div>
Composants associés
Composant Visionneuse de fichiers
Un composant simple de visionneuse de fichiers skeuomorphe aux couleurs vives, conçu pour un tableau de bord, prenant en charge les modes clair et sombre.
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.
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers complexe et réactif avec un style professionnel, une palette de couleurs analogue et une prise en charge du mode sombre, adapté aux environnements professionnels.