Simple 360 Viewer (Glassmorphism, 그레이 스케일)
전자 상거래에 적합한 회색조의 glassmorphism 디자인이 있는 간단하고 반응이 빠른 360 뷰어 구성 요소입니다. 다크 모드를 지원합니다.
HTML 코드
```html
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20">
<!-- 360 Viewer Area (Placeholder) -->
<div class="relative w-full h-64 bg-gray-300 dark:bg-gray-700 flex items-center justify-center">
<span class="text-gray-600 dark:text-gray-400 text-sm">360° Viewer Placeholder</span>
<!-- In a real implementation, a JavaScript library or iframe would go here -->
</div>
<!-- Product Info -->
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Product Name</h3>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Brief product description goes here.</p>
<div class="flex justify-between items-center">
<span class="text-xl font-bold text-gray-900 dark:text-white">$99.99</span>
<button class="px-4 py-2 bg-gray-700 text-white text-xs font-semibold rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Add to Cart</button>
</div>
</div>
</div>
</div>
```