Componente Visor de archivos
Componente de visor de archivos responsivo con modo oscuro
Código HTML
<div class="bg-gray-900 p-8">
<div class="max-w-md mx-auto bg-gray-800 rounded-lg shadow-lg overflow-hidden md:max-w-lg">
<div class="md:flex">
<div class="w-full p-4">
<div class="flex justify-between items-center">
<h2 class="text-gray-200 font-semibold text-xl">Files</h2>
<button class="text-gray-400 hover:text-gray-200 focus:outline-none">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
</button>
</div>
<div class="mt-4">
<div class="flex items-center justify-between py-3 border-b border-gray-700 last:border-b-0">
<div class="flex items-center">
<svg class="h-6 w-6 text-blue-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 010-4H7l-3-4v-5a2 2 012-2h4l2 2h5a2 2 012 2v6m-11 5H4"></path>
</svg>
<span class="text-gray-300">Document.pdf</span>
</div>
<span class="text-gray-500 text-sm">2.3MB</span>
</div>
<div class="flex items-center justify-between py-3 border-b border-gray-700 last:border-b-0">
<div class="flex items-center">
<svg class="h-6 w-6 text-green-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 001-2 2h-4a2 2 001-2 2v6m3 2a2 2 010-4 2 2 010 4zm-6 0a2 2 010-4 2 2 010 4z"></path>
</svg>
<span class="text-gray-300">Spreadsheet.xlsx</span>
</div>
<span class="text-gray-500 text-sm">1.1MB</span>
</div>
<div class="flex items-center justify-between py-3 border-b border-gray-700 last:border-b-0">
<div class="flex items-center">
<svg class="h-6 w-6 text-purple-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 001 21.072 13V6.93a1 1 001-.776-1.609l-4.553-2.276A1 1 000 4.63v14.74c0 .426.49.64 1.06-.33L15 14v-4zm6 5a2 2 011-4 2 2 011 4zm-6 0a2 2 011-4 2 2 011 4z"></path>
</svg>
<span class="text-gray-300">Presentation.pptx</span>
</div>
<span class="text-gray-500 text-sm">4.5MB</span>
</div>
<div class="flex items-center justify-between py-3 border-b border-gray-700 last:border-b-0">
<div class="flex items-center">
<svg class="h-6 w-6 text-red-400 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 001.414 0L14 16m-2-6l-2 2m2 2l2-2m2-2l-2-2m2 2l-2-2m-2 2l-2-2"></path>
</svg>
<span class="text-gray-300">Image.jpg</span>
</div>
<span class="text-gray-500 text-sm">7.8MB</span>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
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.
Componente Visor de archivos
Un componente de visor de archivos responsivo diseñado en un estilo brutalista, con soporte para temas oscuros y uso de Tailwind CSS.
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.