File Viewer Component
A Material Design-inspired file viewer component that displays a list of files with preview images, filenames, file sizes, and a user avatar. It supports responsive design and dark theme.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-lg mx-auto">
<h2 class="text-xl font-semibold mb-4">File Viewer</h2>
<div class="grid grid-cols-1 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
<img src="https://picsum.photos/100/100?random=1" alt="File Preview" class="w-16 h-16 rounded mr-4" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 1</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">2.3 MB</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
<img src="https://picsum.photos/100/100?random=2" alt="File Preview" class="w-16 h-16 rounded mr-4" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 2</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">1.5 MB</p>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
<img src="https://picsum.photos/100/100?random=3" alt="File Preview" class="w-16 h-16 rounded mr-4" />
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 3</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">500 KB</p>
</div>
</div>
</div>
</div>Related Components
File Viewer Component
A complex, responsive file viewer component with a dark mode UI and earth tones, designed for sports/fitness applications. Features file list, preview, and details sections.
Retro File Viewer Component
A complex, responsive file viewer component with a retro/vintage 80s/90s aesthetic, warm neutral color scheme, designed for finance/banking interfaces. Includes dark mode support and interactive elements.
File Viewer Component - Music/Audio
A complex, responsive file viewer component designed for music and audio platforms, featuring a Material Design aesthetic with vibrant colors and dark mode support.