Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers de style brutaliste avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="bg-yellow-300 border-4 border-black p-4 flex flex-col space-y-4 min-h-screen dark:bg-gray-800 dark:border-white">
<div class="bg-red-500 border-4 border-black p-4 flex items-center justify-between dark:bg-red-800 dark:border-white">
<h1 class="text-xl font-bold text-black dark:text-white">File Viewer</h1>
<input type="text" placeholder="Search..." class="border-4 border-black p-2 bg-yellow-100 dark:bg-gray-700 dark:border-white dark:text-white">
</div>
<div class="flex flex-grow space-x-4">
<div class="w-1/4 bg-green-400 border-4 border-black p-4 overflow-y-auto dark:bg-green-700 dark:border-white">
<h2 class="text-lg font-semibold mb-4 text-black dark:text-white">Files</h2>
<ul class="space-y-2">
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">document_A_really_long_name.pdf</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">image_001.jpg</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">archive.zip</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">data_analysis.xlsx</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">presentation.pptx</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">script.py</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">notes.txt</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">config.json</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">report.docx</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">video.mp4</li>
</ul>
</div>
<div class="w-3/4 bg-purple-400 border-4 border-black p-4 flex items-center justify-center text-black dark:bg-purple-700 dark:border-white dark:text-white">
Select a file to view its content.
</div>
</div>
<div class="bg-orange-500 border-4 border-black p-4 flex items-center justify-between dark:bg-orange-800 dark:border-white">
<span class="text-black dark:text-white">Status: Ready</span>
<button class="bg-white border-2 border-black px-4 py-2 font-bold dark:bg-gray-600 dark:border-white dark:text-white">Upload</button>
</div>
</div>Composants associés
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 Brutalist File Viewer
Un composant de visionneuse de fichiers brut et audacieux avec des principes de conception brutalistes. Présente un contraste élevé, une disposition non conventionnelle et des éléments intentionnellement grossiers. Le composant comprend l’aperçu des fichiers, l’affichage des métadonnées et les boutons d’action dans un schéma de couleurs en niveaux de gris austère. Entièrement réactif avec prise en charge du mode sombre à l’aide des classes utilitaires Tailwind CSS dark :. Convient aux sites Web d’entreprise/d’entreprise à la recherche d’une approche visuelle distinctive.
Composant Visionneuse de fichiers
Composant complexe de visionneuse de fichiers conçu pour un portfolio, doté d’un mode sombre avec des couleurs complémentaires, affichant une arborescence de fichiers, un aperçu du contenu et des informations détaillées. Entièrement réactif.