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

360° 뷰어 구성 요소

반응형 360° 뷰어 구성 요소는 스큐어모픽 디자인, 트라이어딕 색 구성표 및 어두운 테마를 지원합니다. 대시보드, 데이터 시각화 및 제어판을 위해 설계되었습니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center dark:bg-gray-800 bg-gray-200 min-h-screen p-5">
    <h2 class="text-3xl font-bold mb-5 text-gray-900 dark:text-white">360° Viewer</h2>
    <div class="relative w-full max-w-xl">
        <div class="overflow-hidden rounded-lg shadow-lg border border-gray-300 dark:border-gray-700">
            <img src="https://picsum.photos/600/400" alt="360° View" class="w-full h-auto transition-transform duration-500 ease-in-out transform hover:scale-105" />
            <div class="absolute inset-0 flex items-center justify-center">
                <button class="bg-blue-500 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-full transition-all duration-200">Rotate Left</button>
                <button class="bg-green-500 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-500 text-white font-bold py-2 px-4 rounded-full transition-all duration-200 ml-4">Rotate Right</button>
            </div>
        </div>
    </div>
    <div class="flex justify-between w-full max-w-xl mt-4">
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
    </div>
</div>

관련 구성 요소

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

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

열다

Neumorphic 360 Viewer 구성 요소

뉴모피즘(Neumorphism) 디자인, 트라이어드 색상 구성표(예: 연한 파란색, 분홍색, 노란색-주황색) 및 소셜 미디어 애플리케이션을 위한 중간 정도의 복잡성을 갖춘 360° 뷰어 구성 요소입니다. 이 구성 요소는 반응형이고, Tailwind 클래스를 사용하여 다크 모드를 지원하고, 이미지에는 picsum.photos를 사용하고 아바타에는 randomuser.me 를 사용합니다. JavaScript가 필요하지 않습니다.

열다

360_Viewer_Component

비즈니스/기업 웹 사이트를 위한 마이크로 인터랙션에 초점을 맞춘 간단하고 반응이 빠른 360° 뷰어 구성 요소로, 어스 톤과 다크 모드를 지원합니다. 인터랙티브 360 뷰어를 시뮬레이션하도록 설계되어 사용자가 '클릭 앤 드래그'하여 이미지를 회전할 수 있습니다.

열다