Компоненты
Просмотрщик на 360°
Простой просмотрщик 360 градусов (стеклянный морфизм в оттенках серого)
Простой просмотрщик 360 градусов (стеклянный морфизм в оттенках серого)
Простой, отзывчивый компонент 360 viewer с дизайном glassmorphism в оттенках серого, подходящий для электронной коммерции. Поддерживает темный режим.
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>
```
Связанные компоненты
Компонент 360DegreeViewer
Простой компонент 360-градусного просмотрщика с брутальным дизайном, дополнительными цветами и поддержкой темного режима. Использует только HTML и Tailwind CSS.
Компонент просмотра на 360°
Минималистичный и отзывчивый компонент просмотра на 360°, использующий Tailwind CSS с поддержкой темного режима.