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_component

Eine komplexe, lebendige, skeuomorphe 360-Grad-Produktbetrachterkomponente für Mode/Schönheit, die vollständig reaktionsschnell ist und den Dunkelmodus unterstützt.

Offen

360°-Viewer-Komponente

Eine 360°-Viewer-Komponente im Glassmorphism-Designstil mit responsiven Effekten und Unterstützung für dunkle Themen.

Offen

360°-Viewer-Komponente

Eine einfache 360°-Viewer-Komponente, die in einem brutalistischen Stil für E-Commerce-Zwecke entworfen wurde, mit einem triadischen Farbschema und einem responsiven Design mit Unterstützung für dunkle Themen.

Offen