CCHub Logo CCHub Tailwind Collection
구성 요소 360° 뷰어 360 Viewer 구성 요소

360 Viewer 구성 요소

Glassmorphism 디자인, 단색 색 구성표 및 적당한 복잡성을 갖춘 360도 뷰어 구성 요소입니다. 블로그/콘텐츠 목적으로 설계되었으며 반응형이며 Tailwind CSS를 사용하여 다크 모드를 지원합니다. JavaScript는 포함되지 않으며 Tailwind 클래스가 있는 HTML만 포함됩니다. 이미지에 picsum.photos를 사용합니다.

미리 보기

HTML 코드 


<div class="dark:bg-gray-900 bg-gray-100 flex items-center justify-center min-h-screen p-4">
  <div class="bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 rounded-xl shadow-lg p-6 w-full max-w-md border border-gray-200 dark:border-gray-700">
    <div class="text-center mb-6">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-2">360° Product Viewer</h2>
      <p class="text-gray-600 dark:text-gray-300">Experience the product from every angle.</p>
    </div>

    <div class="relative mb-6 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600 aspect-video">
      <!-- Placeholder for 360 viewer - In a real scenario, this would be a series of images or a specialized viewer library -->
      <img src="https://picsum.photos/600/400?random=1" alt="Product View 1" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-100" id="viewer-image">
      <img src="https://picsum.photos/600/400?random=2" alt="Product View 2" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-0">
      <img src="https://picsum.photos/600/400?random=3" alt="Product View 3" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-0">
    </div>

    <div class="flex justify-center space-x-2 mb-6">
      <button class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-300">
        <svg class="w-6 h-6 text-white" 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 19l-7-7 7-7"></path></svg>
      </button>
      <button class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-300">
        <svg class="w-6 h-6 text-white" 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="M9 5l7 7-7 7"></path></svg>
      </button>
    </div>

    <div class="text-center text-gray-700 dark:text-gray-300 text-sm">
      <p>Drag or use arrows to rotate view (interactive features would require JavaScript).</p>
    </div>
  </div>
</div>

관련 구성 요소

360° 뷰어 구성 요소

간단하고 반응이 빠른 360° 뷰어 구성 요소는 매력적인 마이크로 인터랙션과 트라이어드 색 구성표를 통해 전자 상거래를 위해 설계되었으며 다크 모드를 지원합니다.

열다

360° 뷰어 구성 요소

전자상거래 컨텍스트를 위해 Material Design에서 어스 톤으로 스타일링된 간단한 360° 뷰어 구성 요소입니다. 여기에는 다크 모드를 지원하는 반응형 디자인이 포함되어 있으며 picsum.photos의 이미지와 randomuser.me 의 아바타를 보여줍니다.

열다

360 Viewer 구성 요소

Tailwind CSS로 구축된 다크 모드 지원 및 반응형 디자인을 갖춘 360° 뷰어 구성 요소입니다. JavaScript가 필요하지 않으며 스타일링 및 응답성을 위해 CSS만 사용합니다.

열다