구성 요소 360° 뷰어 360 Viewer 구성 요소

360 Viewer 구성 요소

Tailwind CSS를 사용하여 뉴모픽 디자인, 반응형 효과 및 어두운 테마를 지원하는 360° 뷰어 구성 요소입니다. 미묘한 그림자와 둥근 모서리가 있는 컨테이너, 이미지 플레이스홀더, 뉴모픽 효과로 스타일링된 탐색 화살표가 특징입니다.

미리 보기

HTML 코드

<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>

360 Viewer 구성 요소

미리 보기

HTML 코드

관련 구성 요소

360° 뷰어 구성 요소

360° 뷰어 구성 요소

파스텔브루탈리스트360애셋뷰어