CCHub Logo CCHub Tailwind Collection
Komponenten Dateibetrachter Datei-Viewer-Komponente

Datei-Viewer-Komponente

Eine Dateibetrachterkomponente mit 3D-Design, responsiven Effekten und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg transform transition-transform hover:scale-105 duration-300">
  <div class="dark:text-white">
    <h2 class="text-xl font-bold mb-4">File Viewer</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
        <img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
        <h3 class="font-semibold text-gray-800 dark:text-white">Document.pdf</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400">1.2 MB</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
        <img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
        <h3 class="font-semibold text-gray-800 dark:text-white">Image.jpg</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400">800 KB</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 rounded-md shadow-md transform transition-transform hover:scale-105 duration-300">
        <img src="https://picsum.photos/400/300" alt="File thumbnail" class="w-full h-32 object-cover mb-2 rounded">
        <h3 class="font-semibold text-gray-800 dark:text-white">Video.mp4</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400">15 MB</p>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Neumorphism File Viewer-Komponente

Eine Dateibetrachter-Komponente im Neumorphism-Stil für soziale Medien mit komplementärem Farbschema und mäßiger Komplexität. Es ist reaktionsschnell und unterstützt dunkles Theme mit Tailwind CSS.

Offen

Datei-Viewer-Komponente

Eine minimalistische und flache Design-Dateibetrachterkomponente, die sich für die Datenvisualisierung in einer Dashboard-Umgebung mit einem monochromatischen Farbschema und Unterstützung für dunkle Themen eignet.

Offen

Datei-Viewer-Komponente

Eine komplexe, reaktionsschnelle Dateibetrachter-Komponente mit einem vom Bauhaus inspirierten Design mit analogen Farben, geeignet für Jobbörsen und Karriereentwicklungsplattformen. Enthält Unterstützung für den Dunkelmodus.

Offen