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 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.
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 Neumorphism File Viewer
Un composant de visualisation de fichiers de style Neumorphism pour les médias sociaux avec une palette de couleurs complémentaire et une complexité modérée. Il est réactif et prend en charge le thème sombre en utilisant Tailwind CSS.