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.
HTML Code
<!-- Brutalist File Viewer Component -->
<div class="w-full bg-white dark:bg-gray-900 border-4 border-black dark:border-gray-700 p-4 md:p-6 font-mono">
<!-- Component Header -->
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 border-b-8 border-black dark:border-gray-700 pb-4">
<h2 class="text-3xl md:text-4xl font-black uppercase tracking-tighter text-black dark:text-white">FILE VIEWER</h2>
<div class="mt-3 md:mt-0 bg-black dark:bg-gray-800 text-white dark:text-gray-200 px-4 py-2 text-sm tracking-widest">
FILES: <span class="font-bold">14</span> | STORAGE: <span class="font-bold">64%</span>
</div>
</div>
<!-- File Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Featured File - Takes up more space -->
<div class="col-span-1 md:col-span-2 border-4 border-black dark:border-gray-700 flex flex-col">
<div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
<span class="font-bold uppercase tracking-wider">QUARTERLY_REPORT.PDF</span>
<span class="text-xs bg-white text-black dark:bg-gray-600 dark:text-white px-2 py-1">PINNED</span>
</div>
<div class="h-64 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
<img src="https://picsum.photos/800/500" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-black opacity-40 dark:opacity-60"></div>
<div class="absolute bottom-0 left-0 w-full p-3 text-white">
<div class="mb-1 text-xl font-bold uppercase">Q4 Financial Report</div>
<div class="text-sm opacity-80">Last modified: Yesterday at 14:23</div>
</div>
</div>
<div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
<div class="flex items-center space-x-1">
<span class="inline-block w-3 h-3 bg-black dark:bg-white rounded-full"></span>
<span class="text-xs text-black dark:text-gray-200">12.4 MB</span>
</div>
<div class="flex space-x-2">
<button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-4 py-2 text-xs uppercase tracking-wider font-bold">Open</button>
<button class="bg-white dark:bg-gray-900 hover:bg-gray-200 dark:hover:bg-gray-800 text-black dark:text-white border-2 border-black dark:border-gray-700 px-4 py-2 text-xs uppercase tracking-wider font-bold">Download</button>
</div>
</div>
</div>
<!-- Standard File Cards -->
<div class="border-4 border-black dark:border-gray-700">
<div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
<span class="font-bold uppercase tracking-wider">PRESENTATION.PPTX</span>
</div>
<div class="h-48 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
<img src="https://picsum.photos/600/400" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
</div>
<div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
<div class="text-xs text-black dark:text-gray-200">5.7 MB</div>
<button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-3 py-1 text-xs uppercase tracking-wider font-bold">View</button>
</div>
</div>
<div class="border-4 border-black dark:border-gray-700">
<div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
<span class="font-bold uppercase tracking-wider">BUDGET_2023.XLSX</span>
</div>
<div class="h-48 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
<img src="https://picsum.photos/601/400" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
</div>
<div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
<div class="text-xs text-black dark:text-gray-200">3.2 MB</div>
<button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-3 py-1 text-xs uppercase tracking-wider font-bold">View</button>
</div>
</div>
<div class="border-4 border-black dark:border-gray-700">
<div class="bg-black dark:bg-gray-800 text-white p-2 flex justify-between items-center">
<span class="font-bold uppercase tracking-wider">LOGO_FINALS.ZIP</span>
</div>
<div class="h-48 bg-gray-200 dark:bg-gray-700 relative overflow-hidden">
<img src="https://picsum.photos/602/400" alt="File preview" class="w-full h-full object-cover brightness-90 dark:brightness-75 mix-blend-multiply">
</div>
<div class="flex p-2 bg-gray-100 dark:bg-gray-800 justify-between items-center">
<div class="text-xs text-black dark:text-gray-200">8.9 MB</div>
<button class="bg-black dark:bg-gray-700 hover:bg-gray-700 dark:hover:bg-gray-600 text-white px-3 py-1 text-xs uppercase tracking-wider font-bold">View</button>
</div>
</div>
</div>
<!-- Shared Users Section -->
<div class="mt-8 border-t-4 border-black dark:border-gray-700 pt-4">
<h3 class="text-xl font-black uppercase tracking-tight text-black dark:text-white mb-4">SHARED WITH</h3>
<div class="flex flex-wrap items-center gap-4">
<div class="flex items-center border-4 border-black dark:border-gray-700 p-2 bg-white dark:bg-gray-800">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar" class="w-10 h-10 object-cover grayscale">
<div class="ml-2">
<div class="text-sm font-bold text-black dark:text-white">K. JOHNSON</div>
<div class="text-xs text-gray-600 dark:text-gray-400">EDITOR</div>
</div>
</div>
<div class="flex items-center border-4 border-black dark:border-gray-700 p-2 bg-white dark:bg-gray-800">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User avatar" class="w-10 h-10 object-cover grayscale">
<div class="ml-2">
<div class="text-sm font-bold text-black dark:text-white">T. WILLIAMS</div>
<div class="text-xs text-gray-600 dark:text-gray-400">VIEWER</div>
</div>
</div>
<div class="flex items-center border-4 border-black dark:border-gray-700 p-2 bg-white dark:bg-gray-800">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="User avatar" class="w-10 h-10 object-cover grayscale">
<div class="ml-2">
<div class="text-sm font-bold text-black dark:text-white">S. DAVIS</div>
<div class="text-xs text-gray-600 dark:text-gray-400">ADMIN</div>
</div>
</div>
<button class="bg-black dark:bg-gray-700 text-white text-sm px-4 py-3 uppercase tracking-wider font-bold hover:bg-gray-800 dark:hover:bg-gray-600">
+ ADD USER
</button>
</div>
</div>
<!-- Bottom Controls -->
<div class="mt-8 flex flex-col md:flex-row justify-between items-start md:items-center border-t-8 border-black dark:border-gray-700 pt-4">
<div class="flex flex-col mb-4 md:mb-0">
<span class="text-xs uppercase tracking-wider text-gray-600 dark:text-gray-400 font-bold">Storage Usage</span>
<div class="w-48 h-8 border-4 border-black dark:border-gray-700 mt-1 overflow-hidden">
<div class="bg-black dark:bg-gray-600 h-full w-2/3"></div>
</div>
</div>
<div class="flex gap-3">
<button class="bg-white dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-black dark:text-white border-4 border-black dark:border-gray-700 px-6 py-3 text-sm uppercase tracking-widest font-bold">
UPLOAD NEW
</button>
<button class="bg-black dark:bg-gray-700 hover:bg-gray-800 dark:hover:bg-gray-600 text-white px-6 py-3 text-sm uppercase tracking-widest font-bold">
MANAGE ALL
</button>
</div>
</div>
</div>Composants associés
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 rétro/vintage conçu pour les applications de commerce électronique. Il dispose d’une palette de couleurs monochromatiques, d’un design réactif et de la prise en charge du mode sombre.
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.