360° 뷰어 구성 요소
Material Design에서 영감을 받은 360° 뷰어 구성 요소는 작업이나 제품을 전시하기 위한 생생한 색상과 반응형 디자인 및 다크 모드 지원을 제공합니다.
HTML 코드
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="relative w-full max-w-lg rounded-lg shadow-lg overflow-hidden">
<!-- 360 Viewer Wrapper -->
<div class="aspect-w-16 aspect-h-9">
<img class="rounded-lg object-cover" src="https://picsum.photos/800/600" alt="360° Product View" />
</div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="bg-white dark:bg-gray-800 rounded-full p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" />
</div>
</div>
</div>
<div class="mt-4 text-center">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Product Name</h2>
<p class="text-gray-600 dark:text-gray-300">A brief description of the product showcasing its features and benefits.</p>
</div>
<div class="flex justify-center mt-4 space-x-4">
<button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">View Details</button>
<button class="bg-green-500 dark:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">Buy Now</button>
</div>
</div>관련 구성 요소
Glassmorphism 360 Viewer 구성 요소
Glassmorphism 360° Viewer 구성 요소는 트라이어딕 색 구성표, 단순한 복잡성, 반응형 디자인 및 어두운 테마 지원을 갖춘 대시보드를 위한 구성 요소입니다.
360_Viewer_Component
부동산 플랫폼을 위한 복잡한 360도 부동산 뷰어 구성 요소로, 고정 공간/개발자 디자인, 레트로/빈티지 색상 팔레트 및 다크 모드 지원으로 완전한 응답성을 제공합니다.