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 file viewer component with 3D design, responsive effects and dark mode support.
File Viewer Component
A Neumorphism-styled file viewer component designed with Tailwind CSS. It features responsive design and dark theme support.