Componente de visor de 360°
Un componente de visor de 360° inspirado en Material Design con colores vibrantes para exhibir trabajos o productos, con diseño receptivo y compatibilidad con el modo oscuro.
Código 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>Componentes relacionados
360DegreeViewerComponent
Un componente de visor 360 simple con un diseño brutalista, colores complementarios y compatibilidad con el modo oscuro. Utiliza solo HTML y Tailwind CSS.
Componente de visor de 360°
Un componente de visor de 360° minimalista y receptivo que utiliza Tailwind CSS con soporte para modo oscuro.
Componente de visor de 360°
Un componente de visor minimalista de 360° diseñado con Tailwind CSS, con efectos responsivos y soporte para temas oscuros.