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

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.

Vorschau

HTML-Code 

<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <div class="w-64 h-64 bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center">
      <!-- Placeholder for 360 image -->
      <img src="https://picsum.photos/600/400?random=1" alt="360 viewer placeholder" class="rounded-lg">
    </div>
    <div class="absolute inset-x-0 bottom-4 flex justify-between px-4">
      <button class="p-3 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
      </button>
      <button class="p-3 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
      </button>
    </div>
  </div>
</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #343434;
  }
</style>

Verwandte Komponenten

360°-Viewer-Komponente

Eine 360°-Viewer-Komponente, die in einem skeuomorphen Stil mit einem Graustufen-Farbschema entwickelt wurde. Es verfügt über eine mittelkomplexe Schnittstelle, die für Social-Media-Anwendungen geeignet ist und sowohl helle als auch dunkle Themen unterstützt.

Offen

360°-Viewer-Komponente

Eine 360°-Viewer-Komponente, die mit Mikrointeraktionen entwickelt wurde, mit responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS.

Offen

Neumorphic 360 Viewer-Komponente

Eine 360°-Viewer-Komponente mit Neumorphism-Design, triadischem Farbschema (Beispiel: Hellblau, Pink, Gelb-Orange) und moderater Komplexität für Social-Media-Anwendungen. Die Komponente reagiert, unterstützt den Dunkelmodus mit Tailwind-Klassen und verwendet picsum.photos für Bilder und randomuser.me für Avatare. Es ist kein JavaScript erforderlich.

Offen