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

360° 뷰어 구성 요소

브루탈리즘 스타일로 디자인된 360° 뷰어 구성 요소로, 높은 대비와 특이한 레이아웃을 특징으로 하며 어두운 테마와 반응형 디자인 효과를 지원합니다.

미리 보기

HTML 코드 

<div class="bg-gray-900 text-white p-8 rounded-lg shadow-lg flex flex-col items-center">
    <h2 class="text-3xl font-bold mb-6">360° Viewer</h2>
    <p class="text-lg mb-4">Explore the 360° view of the object.</p>
    <div class="w-full h-64 border-4 border-white overflow-hidden rounded-lg flex items-center justify-center">
        <img src="https://picsum.photos/600/400?random=1" alt="360 View" class="transform duration-500 hover:scale-105"/>
    </div>
    <div class="mt-6 flex space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-4 border-white shadow-lg"/>
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-4 border-white shadow-lg"/>
    </div>
</div>

관련 구성 요소

360_Viewer_Component_Brutalism_Grayscale

대시보드 애플리케이션을 위해 브루탈리즘 그레이스케일 미학으로 설계된 복잡한 360° 뷰어 구성 요소입니다. 원시적이고 대담한 대비와 인터랙티브 요소를 특징으로 하며, 다크 모드 지원으로 완벽하게 반응합니다.

열다

360 Viewer 구성 요소

Tailwind CSS로 구축된 다크 모드 지원 및 반응형 디자인을 갖춘 360° 뷰어 구성 요소입니다. JavaScript가 필요하지 않으며 스타일링 및 응답성을 위해 CSS만 사용합니다.

열다

360° 뷰어 구성 요소

다크 모드 지원을 포함하여 블로그 콘텐츠 소비를 위한 Glassmorphism 스타일과 파스텔 색 구성표로 설계된 간단한 반응형 360° 뷰어 구성 요소입니다.

열다