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.
HTML Code
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5">
<div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-6 w-full max-w-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">File Viewer</h2>
<div class="flex items-center space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-lg">
<div>
<p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Uploaded on April 20, 2023</p>
</div>
</div>
<div class="flex flex-col">
<div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4 mb-4">
<p class="text-gray-700 dark:text-gray-300">File Name: example-document.pdf</p>
<p class="text-gray-600 dark:text-gray-400">File Size: 1.2 MB</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4 mb-4">
<img src="https://picsum.photos/200/100" alt="Preview" class="w-full h-auto rounded-lg shadow-md mb-2">
<p class="text-gray-700 dark:text-gray-300">Preview of the document</p>
</div>
<div class="bg-gray-200 dark:bg-gray-700 shadow-inner rounded-lg p-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full shadow-md focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50">Download</button>
</div>
</div>
</div>
</div>Composants associés
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.
Skeuomorphic_Monochromatic_File_Viewer
Composant complexe de visionneuse de fichiers skeuomorphe pour une place de marché, conçu avec une palette de couleurs monochromatiques. Il comprend une liste de fichiers, un volet de prévisualisation, des boutons d’action et une section d’informations détaillées, tout en étant entièrement réactif et en prenant en charge le mode sombre.
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.