Composants Visionneuse de fichiers Composant Visionneuse de fichiers

Composant Visionneuse de fichiers

Un composant de visionneuse de fichiers de style brutaliste avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Aperçu

HTML Code

<div class="bg-yellow-300 border-4 border-black p-4 flex flex-col space-y-4 min-h-screen dark:bg-gray-800 dark:border-white">
  <div class="bg-red-500 border-4 border-black p-4 flex items-center justify-between dark:bg-red-800 dark:border-white">
    <h1 class="text-xl font-bold text-black dark:text-white">File Viewer</h1>
    <input type="text" placeholder="Search..." class="border-4 border-black p-2 bg-yellow-100 dark:bg-gray-700 dark:border-white dark:text-white">
  </div>
  <div class="flex flex-grow space-x-4">
    <div class="w-1/4 bg-green-400 border-4 border-black p-4 overflow-y-auto dark:bg-green-700 dark:border-white">
      <h2 class="text-lg font-semibold mb-4 text-black dark:text-white">Files</h2>
      <ul class="space-y-2">
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">document_A_really_long_name.pdf</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">image_001.jpg</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">archive.zip</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">data_analysis.xlsx</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">presentation.pptx</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">script.py</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">notes.txt</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">config.json</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">report.docx</li>
        <li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">video.mp4</li>
      </ul>
    </div>
    <div class="w-3/4 bg-purple-400 border-4 border-black p-4 flex items-center justify-center text-black dark:bg-purple-700 dark:border-white dark:text-white">
      Select a file to view its content.
    </div>
  </div>
  <div class="bg-orange-500 border-4 border-black p-4 flex items-center justify-between dark:bg-orange-800 dark:border-white">
    <span class="text-black dark:text-white">Status: Ready</span>
    <button class="bg-white border-2 border-black px-4 py-2 font-bold dark:bg-gray-600 dark:border-white dark:text-white">Upload</button>
  </div>
</div>

Composants associés

Composant Retro File Viewer

Un composant de visionneuse de fichiers complexe et réactif avec une esthétique rétro/vintage des années 80/90, une palette de couleurs neutres chaudes, conçu pour les interfaces finance/banque. Comprend la prise en charge du mode sombre et des éléments interactifs.

Ouvrir

Composant Visionneuse de fichiers

Un composant de visionneuse de fichiers réactif stylisé avec les principes de conception matérielle à l’aide de Tailwind CSS, avec prise en charge du thème sombre.

Ouvrir

Composant Neumorphism File Viewer

Un composant de visualisation de fichiers de style Neumorphism pour les médias sociaux avec une palette de couleurs complémentaire et une complexité modérée. Il est réactif et prend en charge le thème sombre en utilisant Tailwind CSS.

Ouvrir