Componente Visor de archivos
Un componente de visor de archivos responsivo diseñado con los principios de Material Design utilizando Tailwind CSS, con soporte para temas oscuros.
Código HTML
<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 max-w-md mx-auto mt-10">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">File Viewer</h2>
<div class="border-b border-gray-300 dark:border-gray-600 mb-4">
<h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200">Document Title</h3>
<p class="text-gray-600 dark:text-gray-400">Uploaded by: <span class="font-medium">John Doe</span></p>
</div>
<div class="flex flex-col items-center mb-4">
<img src="https://picsum.photos/200/100" alt="File Preview" class="rounded-lg shadow-md mb-4" />
<p class="text-gray-700 dark:text-gray-300 text-center">File Description: This is a placeholder file viewer that shows brief file details and presentation.</p>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-600 dark:text-gray-400">File Size: 2.3 MB</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded shadow">Download</button>
</div>
</div>
Componentes relacionados
Componente Visor de archivos
Un componente de visor de archivos responsivo diseñado para sitios web de comercio electrónico en modo oscuro con un esquema de color monocromático. Incluye funciones interactivas como la carga de archivos y la vista previa.
Componente Visor de archivos
Un componente de visor de archivos complejo y sensible con un diseño inspirado en la Bauhaus que utiliza colores análogos, adecuado para bolsas de trabajo y plataformas de desarrollo profesional. Incluye soporte para modo oscuro.
Componente Visor de archivos
Componente de visor de archivos responsivo con soporte para modo oscuro