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

Datei-Viewer-Komponente

Eine reaktionsschnelle Dateibetrachter-Komponente, die nach Material Design-Prinzipien unter Verwendung von Tailwind CSS gestaltet wurde und Unterstützung für dunkle Designs bietet.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 max-w-md mx-auto mt-10">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">File Viewer</h2>
    <div class="border-b border-gray-300 dark:border-gray-600 mb-4">
        <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-200">Document Title</h3>
        <p class="text-gray-600 dark:text-gray-400">Uploaded by: <span class="font-medium">John Doe</span></p>
    </div>
    <div class="flex flex-col items-center mb-4">
        <img src="https://picsum.photos/200/100" alt="File Preview" class="rounded-lg shadow-md mb-4" />
        <p class="text-gray-700 dark:text-gray-300 text-center">File Description: This is a placeholder file viewer that shows brief file details and presentation.</p>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-gray-600 dark:text-gray-400">File Size: 2.3 MB</span>
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded shadow">Download</button>
    </div>
</div>

Verwandte Komponenten

Datei-Viewer-Komponente

Eine Retro-/Vintage-Dateibetrachter-Komponente, die für E-Commerce-Anwendungen entwickelt wurde. Es verfügt über ein monochromatisches Farbschema, ein ansprechendes Design und Unterstützung für den Dunkelmodus.

Offen

Skeuomorphic_Monochromatic_File_Viewer

Eine komplexe skeuomorphe Dateibetrachtungskomponente für einen Marktplatz, die mit einem monochromatischen Farbschema gestaltet ist. Es enthält eine Dateiliste, ein Vorschaufenster, Aktionsschaltflächen und einen detaillierten Informationsbereich, während es vollständig reaktionsschnell ist und den Dunkelmodus unterstützt.

Offen

Dateibetrachter-Komponente 1

Eine minimalistische Dateibetrachter-Komponente, die mit Tailwind CSS entwickelt wurde, mit responsiven Effekten und Unterstützung für dunkle Themen. Zeigen Sie Dateien mit einem sauberen Layout an, einschließlich Platzhaltern für Bilder und Benutzer-Avatare.

Offen