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

360° 뷰어 구성 요소

그레이스케일 색 구성표를 사용하여 스큐어모픽 스타일로 설계된 360° 뷰어 구성 요소입니다. 소셜 미디어 응용 프로그램에 적합한 중간 복잡성 인터페이스를 특징으로 하며 밝은 테마와 어두운 테마를 모두 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">360° Viewer</h2>
    <div class="mt-4 w-full max-w-md h-64 border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden shadow-inner">
        <img src="https://picsum.photos/600/400?random=1" alt="360° View" class="w-full h-full object-cover transition-transform hover:scale-105 duration-300" />
    </div>
    <div class="mt-4 flex items-center">
        <div class="flex-shrink-0">
            <img class="w-10 h-10 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
        </div>
        <div class="ml-3">
            <p class="text-sm font-medium text-gray-700 dark:text-gray-300">John Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">Posted 1 hour ago</p>
        </div>
    </div>
    <div class="mt-4">
        <button class="px-4 py-2 text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Interact</button>
    </div>
</div>

관련 구성 요소

360도 뷰어 구성 요소

마이크로 인터랙션, 트라이어딕 색 구성표, 복잡한 복잡성, 전자 상거래 목적, 반응형 디자인, 어두운 테마 지원 및 Tailwind CSS를 갖춘 360도 뷰어 구성 요소.

열다

360° 뷰어 구성 요소

Glassmorphism 스타일과 다크 모드를 지원하는 반응형 디자인을 활용하는 간단한 360° 뷰어 구성 요소입니다.

열다

Glassmorphism 360 Viewer 구성 요소

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

열다