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

360°-Viewer-Komponente

Eine 360°-Viewer-Komponente im Retro-/Vintage-Stil zur Präsentation von Arbeiten oder Produkten in einem Portfolio, die mit Tailwind CSS entworfen wurde, mit einer komplexen Benutzeroberfläche mit mehreren interaktiven Elementen und Unterstützung des Dunkelmodus.

Vorschau

HTML-Code 

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4 text-center">360° Viewer</h2>
    <div class="relative w-full h-64 overflow-hidden rounded-lg shadow-lg">
        <img src="https://picsum.photos/600/400" alt="360 Product View" class="w-full h-full object-cover transition-transform transform hover:scale-105" />
    </div>
    <div class="mt-6 flex justify-center space-x-4">
        <button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-md hover:bg-purple-600 dark:hover:bg-purple-600">Rotate Left</button>
        <button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-md hover:bg-purple-600 dark:hover:bg-purple-600">Rotate Right</button>
    </div>
    <div class="mt-8 bg-gray-700 dark:bg-gray-800 p-4 rounded-md">
        <h3 class="text-lg font-semibold text-white">Product Details:</h3>
        <p class="text-gray-300 dark:text-gray-200 mt-2">Explore this item and check out its unique features and craftsmanship.</p>
    </div>
    <div class="mt-6 bg-gray-700 dark:bg-gray-800 p-4 rounded-md">
        <h3 class="text-lg font-semibold text-white">Team Members:</h3>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
            <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
        </div>
    </div>
</div>

Verwandte Komponenten

PastellBrutalist360AssetViewer

Eine einfache, reaktionsschnelle 360° Asset Viewer-Komponente mit einem brutalistischen Designstil und einem pastellrosa Farbschema. Es ist auf Dashboards zugeschnitten und verfügt über einen statischen Bildplatzhalter (der eine 360°-Ansicht simuliert), nicht funktionierende Bedientasten und eine Informationsanzeige. Es wurde mit Tailwind CSS erstellt, unterstützt den Dunkelmodus und präsentiert eine rohe, kräftige Ästhetik mit dicken Rändern und hart versetzten Schatten.

Offen

360_viewer_marketplace_component

Eine reaktionsschnelle 360°-Viewer-Komponente für Marktplätze mit einem Aquarell-/künstlerischen Designstil mit einem Schwarz-Weiß-Farbschema und einer einzigen hellen Akzentfarbe. Enthält interaktive Elemente, Unterstützung für den Dunkelmodus und verwendet semantisches HTML.

Offen

Einfacher 360°-Viewer (Glassmorphism, Graustufen)

Eine einfache, reaktionsschnelle 360°-Viewer-Komponente mit Glasmorphismus-Design in Graustufen, geeignet für den E-Commerce. Unterstützt den Dunkelmodus.

Offen