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

360°-Viewer-Komponente

Eine einfache 360°-Viewer-Komponente im Material Design mit Erdtönen für einen E-Commerce-Kontext. Es enthält ein responsives Design mit Unterstützung für den Dunkelmodus, das Bilder von picsum.photos und Avatare von randomuser.me präsentiert.

Vorschau

HTML-Code 

<div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">360° Product Viewer</h2>
        <div class="mt-4 flex justify-center items-center">
            <img src="https://picsum.photos/500/300?random=1" alt="360° View" class="rounded-lg shadow-md transition-transform duration-300 hover:scale-105">
        </div>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300">Explore our product from all angles. Rotate to view details and features.</p>
        </div>
        <div class="mt-6 flex justify-center">
            <button class="bg-green-600 dark:bg-green-800 text-white font-semibold py-2 px-4 rounded shadow-md hover:bg-green-500 dark:hover:bg-green-700 transition duration-200">Buy Now</button>
        </div>
        <div class="mt-6 text-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 shadow-lg">
            <p class="mt-2 text-gray-600 dark:text-gray-300">John Doe - E-commerce Specialist</p>
        </div>
    </div>
</div>

Verwandte Komponenten

360_Viewer_Component

Eine komplexe 360°-Produktbetrachter-Komponente, die für Unterhaltungs-/Medienplattformen entwickelt wurde und sich durch einen starken Einsatz von Farbverläufen und sanften Übergängen innerhalb eines warmen, neutralen Farbschemas auszeichnet. Es reagiert vollständig und unterstützt den Dunkelmodus.

Offen

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-Komponente

Eine einfache 360°-Viewer-Komponente, die für den E-Commerce entwickelt wurde, mit Mikrointeraktionen und einem Farbschema in Erdtönen, mit Unterstützung für den Dunkelmodus.

Offen