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

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.

Vorschau

HTML-Code 

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-white text-2xl font-bold text-center mb-4">File Viewer</h2>
    <div class="space-y-4">
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">File Name</h3>
            <p class="text-gray-300 dark:text-gray-400">example_file.pdf</p>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">Uploaded By</h3>
            <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
                <p class="text-gray-300 dark:text-gray-400">John Doe</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">File Preview</h3>
            <img src="https://picsum.photos/200/100" alt="File Preview" class="w-full h-auto rounded-lg">
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 p-4 rounded-lg">
            <h3 class="text-white text-lg font-semibold">Actions</h3>
            <button class="w-full bg-gray-600 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 text-white py-2 px-4 rounded transition duration-150 ease-in-out">Download</button>
            <button class="w-full bg-gray-600 dark:bg-gray-500 hover:bg-gray-500 dark:hover:bg-gray-400 text-white py-2 px-4 rounded transition duration-150 ease-in-out">Delete</button>
        </div>
    </div>
</div>

Verwandte Komponenten

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

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

Datei-Viewer-Komponente

Responsive File Viewer-Komponente mit Unterstützung für den Dunkelmodus

Offen