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

360 Viewer 구성 요소

다크 모드를 지원하는 Resposnive 360도 뷰어 구성 요소.

미리 보기

HTML 코드 

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

관련 구성 요소

360_Viewer_Component

부동산 플랫폼을 위한 복잡한 360도 부동산 뷰어 구성 요소로, 고정 공간/개발자 디자인, 레트로/빈티지 색상 팔레트 및 다크 모드 지원으로 완전한 응답성을 제공합니다.

열다

360 Viewer 구성 요소

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

열다

360° 뷰어 구성 요소

전자 상거래를 위해 브루탈리즘 스타일로 디자인된 간단한 360° 뷰어 구성 요소로, 트라이어딕 색 구성표와 어두운 테마를 지원하는 반응형 디자인이 특징입니다.

열다