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_component_sports_grayscale

Eine einfache, reaktionsschnelle 360°-Viewer-Komponente für Sport-/Fitnessanwendungen mit einem Aquarell-/Kunststil mit einem Graustufen-Farbschema und Unterstützung für den Dunkelmodus.

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

360°-Viewer-Komponente

Eine 360°-Viewer-Komponente mit skeuomorphem Design, responsiven Effekten und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS.

Offen