Componentes Visor de archivos Componente Visor de archivos retro

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.

Vista previa

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 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.

Abrir

Componente Visor de archivos

Un visor de archivos de estilo neumórfico para comercio electrónico que muestra una imagen y detalles del archivo. Proporciona una experiencia de interfaz de usuario suave con soporte para temas oscuros.

Abrir

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.

Abrir