Компонент просмотра на 360°
Простой компонент просмотра на 360°, стилизованный в Material Design с земляными тонами для контекста электронной коммерции. Он включает в себя адаптивный дизайн с поддержкой темного режима, демонстрацию изображений из picsum.photos и аватаров из randomuser.me.
HTML-код
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">360° Product Viewer</h2>
<div class="mt-4 flex justify-center items-center">
<img src="https://picsum.photos/500/300?random=1" alt="360° View" class="rounded-lg shadow-md transition-transform duration-300 hover:scale-105">
</div>
<div class="mt-4 text-center">
<p class="text-gray-600 dark:text-gray-300">Explore our product from all angles. Rotate to view details and features.</p>
</div>
<div class="mt-6 flex justify-center">
<button class="bg-green-600 dark:bg-green-800 text-white font-semibold py-2 px-4 rounded shadow-md hover:bg-green-500 dark:hover:bg-green-700 transition duration-200">Buy Now</button>
</div>
<div class="mt-6 text-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 shadow-lg">
<p class="mt-2 text-gray-600 dark:text-gray-300">John Doe - E-commerce Specialist</p>
</div>
</div>
</div>Связанные компоненты
360_viewer_component
Сложный, яркий, скевоморфный 360-градусный компонент просмотра товаров для моды и красоты, полностью адаптивный с поддержкой темного режима.
Компонент просмотра на 360°
Простой компонент 360° Viewer, предназначенный для электронной коммерции, с микровзаимодействиями и цветовой схемой земляных тонов, с поддержкой темного режима.
360_viewer_industrial_finance
Простой, отзывчивый компонент просмотра на 360° с индустриальной, сырой эстетикой и градиентной цветовой схемой радуги, разработанный для финансовых и банковских интерфейсов. Включает поддержку темного режима.