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

Datei-Viewer-Komponente

Eine reaktionsschnelle Dateibetrachtungskomponente, die für E-Commerce-Websites im Dunkelmodus mit einem monochromatischen Farbschema entwickelt wurde. Es enthält interaktive Funktionen wie Datei-Upload und Vorschau.

Vorschau

HTML-Code 

<div class="bg-gray-800 text-gray-200 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-semibold mb-4">File Viewer</h2>
    <div class="mb-4">
        <label class="block mb-2">Upload File:</label>
        <input type="file" class="bg-gray-900 text-gray-200 p-2 border border-gray-600 rounded w-full" />
    </div>
    <div class="mt-4">
        <h3 class="text-xl mb-2">File Preview:</h3>
        <div class="bg-gray-700 p-4 rounded">
            <img src="https://picsum.photos/300/200" alt="Preview" class="w-full rounded" />
        </div>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2" />
            <div>
                <span class="font-bold">Uploaded by:</span> John Doe
            </div>
        </div>
    </div>
    <div class="mt-4">
        <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded">
            Confirm Upload
        </button>
    </div>
</div>

Verwandte Komponenten

Datei-Viewer-Komponente

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

Offen

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.

Offen

Datei-Viewer-Komponente

Eine Dateibetrachterkomponente im Neumorphism-Stil, die mit Tailwind CSS entwickelt wurde. Es bietet responsives Design und Unterstützung für dunkle Themen.

Offen