Componente Visor de archivos
Un componente de visor de archivos nostálgico inspirado en la estética retro de los años 80/90, diseñado con Tailwind CSS y compatible con efectos responsivos y temas oscuros.
Código HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
<h2 class="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-white">File Viewer</h2>
<div class="flex flex-col items-center">
<div class="mb-4">
<img src="https://picsum.photos/200/150" alt="File Thumbnail" class="w-full h-auto rounded-lg shadow-md transition-transform duration-300 hover:scale-105" />
</div>
<div class="text-center">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300">File Name: Example Document.pdf</h3>
<p class="text-sm text-gray-500 dark:text-gray-400">Uploaded by:</p>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mx-auto" />
<p class="text-sm text-gray-700 dark:text-gray-300">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Uploaded on: June 10, 2023</p>
</div>
<div class="mt-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300">Open File</button>
<button class="ml-2 bg-gray-300 dark:bg-gray-600 hover:bg-gray-400 dark:hover:bg-gray-500 text-gray-800 dark:text-white font-bold py-2 px-4 rounded transition duration-300">Delete File</button>
</div>
</div>
</div>Componentes relacionados
Componente Visor de archivos
Un componente de visor de archivos inspirado en Material Design que muestra una lista de archivos con imágenes de vista previa, nombres de archivo, tamaños de archivo y un avatar de usuario. Es compatible con el diseño responsivo y el tema oscuro.
Componente 1 del visor de archivos
Un componente de visor de archivos minimalista diseñado con Tailwind CSS, con efectos responsivos y compatibilidad con temas oscuros. Muestre archivos con un diseño limpio, incluidos marcadores de posición para imágenes y avatares de usuario.
Componente Visor de archivos
Un componente de visor de archivos con diseño 3D, efectos responsivos y compatibilidad con el modo oscuro.