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

360°-Viewer-Komponente

Resposnive 360-Grad-Viewer-Komponente mit Unterstützung für den Dunkelmodus.

Vorschau

HTML-Code 

<div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-64 h-64">
    <div class="absolute inset-0 transform rotate-45 bg-gray-300 dark:bg-gray-700"></div>
    <div class="absolute inset-0 transform -rotate-45 bg-gray-400 dark:bg-gray-600"></div>
    <div class="absolute inset-4 flex justify-center items-center bg-white dark:bg-gray-800">
      <div class="w-32 h-32 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center">
        <svg class="w-16 h-16 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14m-7 0l-4.553 2.276A1 1 0 013 15.382v-6.764a1 1 0 011.447-.894L7 10m0 4v6a1 1 0 001 1h3v-60H8a1 1 0 00-1 1v6zmz"></path></svg>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

360_Viewer_Component

Eine komplexe 360-Grad-Immobilienbetrachterkomponente für Immobilienplattformen mit Monospace-/Entwicklerdesign, Retro-/Vintage-Farbpalette und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.

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 einfache 360°-Viewer-Komponente, die im Brutalismus-Stil und in Pastellfarben gestaltet ist und sich für Social-Media-Schnittstellen eignet.

Offen