Componente Visor de archivos de neumorfismo
Un componente de visor de archivos de estilo neumorfismo para redes sociales con un esquema de color complementario y complejidad moderada. Es responsivo y admite el tema oscuro usando Tailwind CSS.
Código HTML
<div class="p-6 max-w-sm mx-auto bg-gray-100 dark:bg-gray-800 rounded-xl shadow-lg space-y-4">
<div class="flex items-center space-x-4">
<div class="flex-shrink-0">
<svg class="h-12 w-12 text-teal-500 dark:text-teal-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-5m0 0V5c0-1.1.9-2 2-2h2a2 2 0 012 2v5m0 0v5a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
</div>
<div class="flex-grow">
<div class="text-xl font-medium text-black dark:text-white">Document.pdf</div>
<p class="text-gray-500 dark:text-gray-400">1.5 MB</p>
</div>
</div>
<div class="flex justify-between items-center">
<button class="px-4 py-2 text-sm text-blue-600 dark:text-blue-300 font-semibold rounded-full border border-transparent bg-blue-200 dark:bg-blue-700 hover:bg-blue-300 dark:hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">Download</button>
<button class="px-4 py-2 text-sm text-red-600 dark:text-red-300 font-semibold rounded-full border border-transparent bg-red-200 dark:bg-red-700 hover:bg-red-300 dark:hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2">Delete</button>
</div>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-teal-500 dark:bg-teal-300 h-2.5 rounded-full" style="width: 50%"></div>
</div>
</div>
<style>
.shadow-lg {
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .shadow-lg {
box-shadow: 7px 7px 15px #6b6b6b, -7px -7px 15px #a1a1a1;
}
</style>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 responsivo diseñado con los principios de Material Design, con soporte para modo oscuro y efectos responsivos.
Componente Visor de archivos retro
Un componente de visor de archivos complejo y receptivo con una estética retro/vintage de los 80/90, esquema de color neutro cálido, diseñado para interfaces financieras/bancarias. Incluye soporte para modo oscuro y elementos interactivos.