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

360°-Viewer-Komponente

Eine reaktionsschnelle 360°-Viewer-Komponente mit skeuomorphem Design, triadischem Farbschema und Unterstützung für dunkle Themen. Entwickelt für die Visualisierung von Dashboard-Daten und Bedienfeldern.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center dark:bg-gray-800 bg-gray-200 min-h-screen p-5">
    <h2 class="text-3xl font-bold mb-5 text-gray-900 dark:text-white">360° Viewer</h2>
    <div class="relative w-full max-w-xl">
        <div class="overflow-hidden rounded-lg shadow-lg border border-gray-300 dark:border-gray-700">
            <img src="https://picsum.photos/600/400" alt="360° View" class="w-full h-auto transition-transform duration-500 ease-in-out transform hover:scale-105" />
            <div class="absolute inset-0 flex items-center justify-center">
                <button class="bg-blue-500 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-full transition-all duration-200">Rotate Left</button>
                <button class="bg-green-500 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-500 text-white font-bold py-2 px-4 rounded-full transition-all duration-200 ml-4">Rotate Right</button>
            </div>
        </div>
    </div>
    <div class="flex justify-between w-full max-w-xl mt-4">
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
    </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 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

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