Componente Visor de archivos
Un componente de visor de archivos retro/vintage diseñado para aplicaciones de comercio electrónico. Cuenta con un esquema de color monocromático, diseño receptivo y soporte para el modo oscuro.
Código HTML
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-white text-2xl font-bold text-center mb-4">File Viewer</h2>
<div class="space-y-4">
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
<h3 class="text-white text-lg font-semibold">File Name</h3>
<p class="text-gray-300 dark:text-gray-400">example_file.pdf</p>
</div>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
<h3 class="text-white text-lg font-semibold">Uploaded By</h3>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
<p class="text-gray-300 dark:text-gray-400">John Doe</p>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
<h3 class="text-white text-lg font-semibold">File Preview</h3>
<img src="https://picsum.photos/200/100" alt="File Preview" class="w-full h-auto rounded-lg">
</div>
<div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
<h3 class="text-white text-lg font-semibold">Actions</h3>
<button class="w-full bg-gray-600 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 text-white py-2 px-4 rounded transition duration-150 ease-in-out">Download</button>
<button class="w-full bg-gray-600 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 text-white py-2 px-4 rounded transition duration-150 ease-in-out">Delete</button>
</div>
</div>
</div>Componentes relacionados
Componente Visor de archivos
Un componente de visor de archivos receptivo con microinteracciones, colores vibrantes y soporte de modo oscuro, adecuado para el consumo de blogs o contenido. Muestra los detalles del archivo, una vista previa y las acciones relacionadas.
Skeuomorphic_Monochromatic_File_Viewer
Un componente de visor de archivos esqueuomórfico complejo para un mercado, diseñado con un esquema de color monocromático. Incluye una lista de archivos, un panel de vista previa, botones de acción y una sección de información detallada, todo ello sin dejar de responder y ser compatible con el modo oscuro.
Componente Visor de archivos retro
Componente de visor de archivos retro / vintage con diseño receptivo y soporte de tema oscuro. Incluye una lista de archivos con iconos y nombres, y un área de vista previa. Utiliza fuentes y colores de estilo retro.