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

360° 뷰어 구성 요소

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

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center w-full h-screen bg-gray-100 dark:bg-gray-800 transition-all duration-300 p-5">
    <!-- Title -->
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-5">360° Product Viewer</h1>
    
    <!-- 360° Image Viewer -->
    <div class="relative w-full max-w-lg overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-900">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="w-full transition-transform duration-500 ease-in-out transform hover:scale-105" />
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 opacity-0 hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-lg">Hover to view</span>
        </div>
    </div>
    
    <!-- Product Details -->
    <div class="mt-5 text-center">
        <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Stylish and Modern Product</h2>
        <p class="text-gray-600 dark:text-gray-400">This product is perfect for your day-to-day activities and brings a fresh touch to your style.</p>
        <div class="flex items-center justify-center space-x-4 mt-4">
            <span class="text-lg font-bold text-gray-800 dark:text-white">$29.99</span>
            <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition duration-200">Add to Cart</button>
        </div>
    </div>
</div>

관련 구성 요소

360° 뷰어 구성 요소

전자 상거래를 위해 설계된 간단한 360° 뷰어 구성 요소로, 마이크로 인터랙션과 어스 톤 색 구성표를 특징으로 하며 다크 모드를 지원합니다.

열다

레트로 360 뷰어

Retro 360° Viewer Tailwind CSS를 사용하여 반응형 효과 및 어두운 테마를 지원하는 구성 요소. picsum.photos의 자리 표시자 이미지를 사용합니다.

열다

Simple 360 Viewer (Glassmorphism, 그레이 스케일)

전자 상거래에 적합한 회색조의 glassmorphism 디자인이 있는 간단하고 반응이 빠른 360 뷰어 구성 요소입니다. 다크 모드를 지원합니다.

열다