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

360°-Viewer-Komponente

Eine vom Material Design inspirierte 360°-Viewer-Komponente mit lebendigen Farben für die Präsentation von Arbeiten oder Produkten, mit responsivem Design und Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="relative w-full max-w-lg rounded-lg shadow-lg overflow-hidden">
        <!-- 360 Viewer Wrapper -->
        <div class="aspect-w-16 aspect-h-9">
            <img class="rounded-lg object-cover" src="https://picsum.photos/800/600" alt="360° Product View" />
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white dark:bg-gray-800 rounded-full p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
                <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" />
            </div>
        </div>
    </div>

    <div class="mt-4 text-center">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Product Name</h2>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the product showcasing its features and benefits.</p>
    </div>

    <div class="flex justify-center mt-4 space-x-4">
        <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">View Details</button>
        <button class="bg-green-500 dark:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">Buy Now</button>
    </div>
</div>

Verwandte Komponenten

360°-Viewer-Komponente

Eine 360-Grad-Betrachterkomponente mit Glassmorphism-Design, monochromatischem Farbschema und moderater Komplexität. Es wurde für Blog-/Content-Zwecke entwickelt, ist reaktionsschnell und unterstützt den Dunkelmodus mit Tailwind CSS. Es ist kein JavaScript enthalten, nur HTML mit Tailwind-Klassen. Verwendet picsum.photos für Bilder.

Offen

360°-Viewer-Komponente

Eine 360°-Viewer-Komponente mit einem neumorphen Design, responsiven Effekten und Unterstützung für dunkle Designs mit Tailwind CSS. Es verfügt über einen Container mit subtilen Schatten und abgerundeten Ecken, einen Bildplatzhalter und Navigationspfeile, die mit dem Neumorphic-Effekt gestaltet sind.

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