Brutalist File Viewer Component
A raw, bold file viewer component with brutalist design principles. Features high contrast, unconventional layout, and intentionally crude elements. The component includes file preview, metadata display, and action buttons in a stark grayscale color scheme. Fully responsive with dark mode support using Tailwind CSS dark: utility classes. Suitable for business/corporate websites seeking a distinctive visual approach.
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>Related Components
File Viewer Component
A brutalist-style file viewer component with responsive design and dark mode support using Tailwind CSS.