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

Datei-Viewer-Komponente

Eine reaktionsschnelle Dateibetrachtungskomponente, die nach den Prinzipien des Material Designs entwickelt wurde und Unterstützung für den Dunkelmodus und reaktionsschnelle Effekte bietet.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-lg mx-auto">
    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">File Viewer</h2>
    <div class="space-y-4">
        <div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
            <img src="https://picsum.photos/50/50" alt="File Thumbnail" class="rounded-lg mr-3">
            <div class="flex-grow">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Document Title</h3>
                <p class="text-gray-600 dark:text-gray-400">File Type: PDF</p>
                <p class="text-gray-600 dark:text-gray-400">Size: 1.2 MB</p>
            </div>
        </div>
        <div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
            <img src="https://picsum.photos/50/50/?random=1" alt="File Thumbnail" class="rounded-lg mr-3">
            <div class="flex-grow">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Image Title</h3>
                <p class="text-gray-600 dark:text-gray-400">File Type: JPEG</p>
                <p class="text-gray-600 dark:text-gray-400">Size: 3.4 MB</p>
            </div>
        </div>
        <div class="border border-gray-300 dark:border-gray-700 rounded-lg p-4 flex items-center">
            <img src="https://picsum.photos/50/50/?random=2" alt="File Thumbnail" class="rounded-lg mr-3">
            <div class="flex-grow">
                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Video Title</h3>
                <p class="text-gray-600 dark:text-gray-400">File Type: MP4</p>
                <p class="text-gray-600 dark:text-gray-400">Size: 20 MB</p>
            </div>
        </div>
    </div>
</div>

<!-- Dark Mode CSS -->
<style>
    /* Example dark mode CSS */
    body {
        background-color: #121212;
        color: #ffffff;
    }
</style>

Verwandte Komponenten

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

Datei-Viewer-Komponente

Eine einfache, reaktionsschnelle Dateibetrachterkomponente mit einem von Papier/Druck inspirierten Design, das für Geschäfts-/Unternehmenswebsites geeignet ist. Bietet Unterstützung für analoge Farben, semantisches HTML und Dunkelmodus.

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