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

360° 뷰어 구성 요소

Tailwind CSS로 디자인된 미니멀한 360° 뷰어 구성 요소로, 반응형 효과와 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">360° Viewer</h2>
    <div class="overflow-hidden rounded-lg w-full max-w-md">
        <img src="https://picsum.photos/600/400?random" alt="360° view" class="w-full transition-transform duration-500 transform hover:scale-105" />
    </div>
    <p class="mt-4 text-gray-600 dark:text-gray-300 text-center">Hover to see the view.</p>
    <div class="mt-6 flex space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-12 w-12 rounded-full border-2 border-white dark:border-gray-800 shadow" />
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-12 w-12 rounded-full border-2 border-white dark:border-gray-800 shadow" />
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="h-12 w-12 rounded-full border-2 border-white dark:border-gray-800 shadow" />
    </div>
</div>

관련 구성 요소

360_viewer_component

교육용 플랫폼용으로 설계된 단순하고 미니멀한 360 뷰어 구성 요소로, 밝은 네온/일렉트릭 색상과 강력한 타이포그래피를 특징으로 하며 완전한 응답성과 다크 모드를 지원합니다.

열다

360° 뷰어 구성 요소

머티리얼 디자인 원칙에 따라 설계된 간단한 360° 뷰어 구성 요소로, 생생한 색상과 어두운 테마 지원을 사용하여 포트폴리오 쇼케이스에 적합합니다.

열다

360 Viewer 구성 요소

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

열다