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.
Código HTML
<div class="font-mono bg-gray-200 dark:bg-gray-800 min-h-screen">
<div class="container mx-auto p-4">
<div class="flex flex-col md:flex-row bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<!-- File List -->
<div class="w-full md:w-1/3 pr-4">
<h2 class="text-lg font-bold mb-4 text-gray-800 dark:text-gray-200">Files</h2>
<ul>
<li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
<svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
<span class="text-gray-700 dark:text-gray-300">document.txt</span>
</li>
<li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
<svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path></svg>
<span class="text-gray-700 dark:text-gray-300">image.jpg</span>
</li>
<li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
<svg class="w-5 h-5 mr-2 text-red-500 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8.668V14a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
<span class="text-gray-700 dark:text-gray-300">video.mp4</span>
</li>
</ul>
</div>
<!-- File Preview -->
<div class="w-full md:w-2/3 mt-4 md:mt-0">
<h2 class="text-lg font-bold mb-4 text-gray-800 dark:text-gray-200">Preview</h2>
<div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg h-64 flex items-center justify-center text-gray-500 dark:text-gray-400">
Select a file to preview
</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 interactivo con estilo de Material Design y compatibilidad con el modo oscuro mediante Tailwind CSS. El componente muestra una lista de archivos con iconos, nombres, tamaños y fechas de modificación.
Componente Visor de archivos
Un componente de visor de archivos de estilo brutalista con diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.