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

Datei-Viewer-Komponente

Eine von Material Design inspirierte Dateibetrachter-Komponente, die eine Liste von Dateien mit Vorschaubildern, Dateinamen, Dateigrößen und einem Benutzeravatar anzeigt. Es unterstützt responsives Design und dunkles Design.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 max-w-lg mx-auto">
    <h2 class="text-xl font-semibold mb-4">File Viewer</h2>
    <div class="grid grid-cols-1 gap-4">
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
            <img src="https://picsum.photos/100/100?random=1" alt="File Preview" class="w-16 h-16 rounded mr-4" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 1</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">2.3 MB</p>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
            <img src="https://picsum.photos/100/100?random=2" alt="File Preview" class="w-16 h-16 rounded mr-4" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 2</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">1.5 MB</p>
            </div>
        </div>
        <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg flex items-center shadow-sm hover:shadow-md transition-shadow">
            <img src="https://picsum.photos/100/100?random=3" alt="File Preview" class="w-16 h-16 rounded mr-4" />
            <div>
                <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">File Name 3</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">500 KB</p>
            </div>
        </div>
    </div>
</div>

Verwandte Komponenten

Datei-Viewer-Komponente

Eine reaktionsschnelle Dateibetrachterkomponente mit Mikrointeraktionen, lebendigen Farben und Unterstützung für den Dunkelmodus, die sich für den Konsum von Blogs oder Inhalten eignet. Es zeigt Dateidetails, eine Vorschau und zugehörige Aktionen an.

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

Retro File Viewer-Komponente

Retro/Vintage-Dateibetrachter-Komponente mit responsivem Layout und Unterstützung für dunkle Themen. Enthält eine Dateiliste mit Symbolen und Namen sowie einen Vorschaubereich. Verwendet Schriftarten und Farben im Retro-Stil.

Offen