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

360° 뷰어 구성 요소

소셜 미디어 인터페이스에 적합한 브루탈리즘 스타일과 파스텔 색상으로 설계된 간단한 360° 뷰어 구성 요소입니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">360° Viewer</h2>
    <div class="relative w-full max-w-md overflow-hidden rounded-lg border border-gray-300 dark:border-gray-700">
        <img src="https://picsum.photos/seed/picsum/800/400" alt="360 view" class="w-full h-auto transform transition-transform duration-500" />
        <div class="absolute inset-0 flex items-center justify-center">
            <p class="text-lg text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 bg-opacity-75 px-4 py-2 rounded-lg shadow-md">Swipe to rotate</p>
        </div>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600">
        <div class="ml-3">
            <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Username</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Posted a new photo</p>
        </div>
    </div>
</div>

관련 구성 요소

360_Viewer_Component_Watercolor_Corporate_Blues

수채화/예술적 디자인 스타일과 기업 블루 색상 구성표가 있는 복잡한 360° 뷰어 구성 요소로, 예약 및 예약 시스템에 특별히 적합합니다. 여러 대화형 요소를 특징으로 하며 다크 모드 지원으로 완벽하게 반응합니다.

열다

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

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

열다

Glassmorphism 360 Viewer 구성 요소

Glassmorphism 360° Viewer 구성 요소는 트라이어딕 색 구성표, 단순한 복잡성, 반응형 디자인 및 어두운 테마 지원을 갖춘 대시보드를 위한 구성 요소입니다.

열다