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

360°-Viewer-Komponente

Eine einfache 360°-Viewer-Komponente, die im Brutalismus-Stil und in Pastellfarben gestaltet ist und sich für Social-Media-Schnittstellen eignet.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">360° Viewer</h2>
    <div class="relative w-full max-w-md overflow-hidden rounded-lg border border-gray-300 dark:border-gray-700">
        <img src="https://picsum.photos/seed/picsum/800/400" alt="360 view" class="w-full h-auto transform transition-transform duration-500" />
        <div class="absolute inset-0 flex items-center justify-center">
            <p class="text-lg text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 bg-opacity-75 px-4 py-2 rounded-lg shadow-md">Swipe to rotate</p>
        </div>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600">
        <div class="ml-3">
            <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Username</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Posted a new photo</p>
        </div>
    </div>
</div>

Verwandte Komponenten

360_Viewer_Component

Eine einfache, reaktionsschnelle 360°-Viewer-Komponente mit Mikrointeraktionsfokus für Geschäfts-/Unternehmenswebsites mit Unterstützung für Erdtöne und Dunkelmodus. Entwickelt, um einen interaktiven 360-Grad-Viewer zu simulieren, der es Benutzern ermöglicht, ein Bild zu "klicken und zu ziehen", um es zu drehen.

Offen

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.

Offen

360°-Viewer-Komponente

Eine reaktionsschnelle 360-Grad-Viewer-Komponente, die für den E-Commerce entwickelt wurde und den Dunkelmodus unterstützt. Das Styling ist Retro/Vintage mit einem pastellfarbenen Farbschema. Verwendet nur HTML und Tailwind CSS.

Offen