Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers de conception minimaliste et plat adapté à la visualisation de données dans un tableau de bord avec une palette de couleurs monochromatiques et la prise en charge du thème sombre.
HTML Code
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-md">
<h2 class="text-xl text-gray-100 dark:text-gray-200 mb-4">File Viewer</h2>
<div class="flex flex-col md:flex-row justify-between mb-4">
<div class="w-full md:w-2/3">
<img src="https://picsum.photos/600/400" alt="File Preview" class="rounded-lg">
</div>
<div class="w-full md:w-1/3 md:ml-4">
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow">
<h3 class="text-lg text-gray-200 dark:text-gray-300 mb-2">File Details</h3>
<p class="text-gray-300 dark:text-gray-400">Name: Example File.pdf</p>
<p class="text-gray-300 dark:text-gray-400">Size: 2.5 MB</p>
<p class="text-gray-300 dark:text-gray-400">Date: 2023-10-05</p>
<div class="mt-4">
<button class="bg-blue-600 hover:bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg">Download</button>
<button class="bg-red-600 hover:bg-red-500 text-white font-semibold py-2 px-4 rounded-lg ml-2">Delete</button>
</div>
</div>
</div>
</div>
<div class="flex flex-col">
<h3 class="text-lg text-gray-200 dark:text-gray-300 mb-2">Comments</h3>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow mb-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-gray-300 dark:text-gray-400">John Doe</h4>
<p class="text-gray-400 dark:text-gray-500">Great file!</p>
</div>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg shadow mb-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="text-gray-300 dark:text-gray-400">Jane Doe</h4>
<p class="text-gray-400 dark:text-gray-500">Thanks for sharing!</p>
</div>
</div>
</div>
<div class="flex mb-2">
<input type="text" placeholder="Add a comment..." class="flex-grow border border-gray-600 bg-gray-700 dark:bg-gray-800 text-gray-200 dark:text-gray-300 rounded-lg py-2 px-4 mr-2" />
<button class="bg-green-500 hover:bg-green-400 text-white font-semibold py-2 px-4 rounded-lg">Post</button>
</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
Composant de visionneuse de fichiers réactif avec brutalisme et design pastel
Composant Visionneuse de fichiers
Un composant de visualisation de fichiers complexe et réactif avec un design inspiré du Bauhaus utilisant des couleurs analogues, adapté aux sites d’emploi et aux plateformes de développement de carrière. Inclut la prise en charge du mode sombre.