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

360° 뷰어 구성 요소

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

미리 보기

HTML 코드 

<div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">360° Product Viewer</h2>
        <div class="mt-4 flex justify-center items-center">
            <img src="https://picsum.photos/500/300?random=1" alt="360° View" class="rounded-lg shadow-md transition-transform duration-300 hover:scale-105">
        </div>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300">Explore our product from all angles. Rotate to view details and features.</p>
        </div>
        <div class="mt-6 flex justify-center">
            <button class="bg-green-600 dark:bg-green-800 text-white font-semibold py-2 px-4 rounded shadow-md hover:bg-green-500 dark:hover:bg-green-700 transition duration-200">Buy Now</button>
        </div>
        <div class="mt-6 text-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 shadow-lg">
            <p class="mt-2 text-gray-600 dark:text-gray-300">John Doe - E-commerce Specialist</p>
        </div>
    </div>
</div>

관련 구성 요소

360_Viewer_Component

엔터테인먼트/미디어 플랫폼용으로 설계된 복잡한 360° 제품 뷰어 구성 요소로, 따뜻한 중성 색 구성표 내에서 색상 그라디언트를 많이 사용하고 부드러운 전환을 특징으로 합니다. 완벽하게 반응하며 다크 모드를 지원합니다.

열다

360_Viewer_Component_Brutalism_Grayscale

대시보드 애플리케이션을 위해 브루탈리즘 그레이스케일 미학으로 설계된 복잡한 360° 뷰어 구성 요소입니다. 원시적이고 대담한 대비와 인터랙티브 요소를 특징으로 하며, 다크 모드 지원으로 완벽하게 반응합니다.

열다

360° 뷰어 구성 요소

Material Design에서 영감을 받은 360° 뷰어 구성 요소는 작업이나 제품을 전시하기 위한 생생한 색상과 반응형 디자인 및 다크 모드 지원을 제공합니다.

열다