CCHub Logo CCHub Tailwind Collection
Komponenten 360°-Betrachter 360°-Viewer-Komponente

360°-Viewer-Komponente

Eine 360°-Viewer-Komponente im Stil des Brutalismus, die ein rotierendes Bild in einem rohen und kräftigen Design zeigt, mit responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-900 text-white p-4">
    <h1 class="text-4xl font-bold mb-4">360° Viewer</h1>
    <div class="relative w-full max-w-3xl h-96 bg-gray-800 border-4 border-white rounded-lg overflow-hidden shadow-lg">
        <img src="https://picsum.photos/800/600" alt="360° view" class="absolute inset-0 w-full h-full object-cover transform transition-transform duration-700 ease-in-out hover:rotate-12 hover:scale-105"/>
        <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 p-4">
            <h2 class="text-2xl font-semibold">View from all angles</h2>
            <p class="text-sm">Hover to rotate the view</p>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white" />
        <p class="mt-2">Created by: John Doe</p>
    </div>
</div>

Verwandte Komponenten

360°-Viewer-Komponente

Eine minimalistische und reaktionsschnelle 360°-Viewer-Komponente, die Tailwind CSS mit Unterstützung für den Dunkelmodus verwendet.

Offen

360°-Viewer-Komponente

Eine 360°-Viewer-Komponente im brutalistischen Stil mit hohem Kontrast und ungewöhnlichen Layouts, die dunkle Themen und responsive Designeffekte unterstützen.

Offen

360°-Viewer-Komponente

Eine responsive 360°-Viewer-Komponente mit Mikrointeraktionen für Social Media mit hellen und dunklen Themen in analogen Farben und moderater Komplexität.

Offen