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

360° 뷰어 구성 요소

포트폴리오에서 작품이나 제품을 보여주기 위한 레트로/빈티지 스타일의 360° 뷰어 구성 요소로, 여러 대화형 요소를 특징으로 하고 다크 모드를 지원하는 복잡한 인터페이스와 함께 Tailwind CSS를 사용하여 설계되었습니다.

미리 보기

HTML 코드 

<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4 text-center">360° Viewer</h2>
    <div class="relative w-full h-64 overflow-hidden rounded-lg shadow-lg">
        <img src="https://picsum.photos/600/400" alt="360 Product View" class="w-full h-full object-cover transition-transform transform hover:scale-105" />
    </div>
    <div class="mt-6 flex justify-center space-x-4">
        <button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-md hover:bg-purple-600 dark:hover:bg-purple-600">Rotate Left</button>
        <button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-md hover:bg-purple-600 dark:hover:bg-purple-600">Rotate Right</button>
    </div>
    <div class="mt-8 bg-gray-700 dark:bg-gray-800 p-4 rounded-md">
        <h3 class="text-lg font-semibold text-white">Product Details:</h3>
        <p class="text-gray-300 dark:text-gray-200 mt-2">Explore this item and check out its unique features and craftsmanship.</p>
    </div>
    <div class="mt-6 bg-gray-700 dark:bg-gray-800 p-4 rounded-md">
        <h3 class="text-lg font-semibold text-white">Team Members:</h3>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
            <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
        </div>
    </div>
</div>

관련 구성 요소

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

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

열다

Neumorphic 360 Viewer 구성 요소

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

열다

360 Viewer 구성 요소

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

열다