Componente de visor de 360°
Un componente de visor simple de 360° diseñado en un estilo brutalista para fines de comercio electrónico, con un esquema de color triádico y un diseño receptivo con soporte para temas oscuros.
Código HTML
<div class="flex flex-col items-center justify-center p-5 bg-gray-900 text-white dark:bg-gray-800">
<h2 class="text-3xl font-bold mb-4">360° Product Viewer</h2>
<div class="flex items-center justify-center space-x-5 mb-4">
<img src="https://picsum.photos/200/300?random=1" alt="Product Image" class="border-4 border-red-600 dark:border-blue-400 rounded-lg transition-transform duration-500 ease-in-out hover:scale-105" />
<img src="https://picsum.photos/200/300?random=2" alt="Product Image" class="border-4 border-yellow-400 dark:border-green-500 rounded-lg transition-transform duration-500 ease-in-out hover:scale-105" />
<img src="https://picsum.photos/200/300?random=3" alt="Product Image" class="border-4 border-blue-500 dark:border-red-600 rounded-lg transition-transform duration-500 ease-in-out hover:scale-105" />
</div>
<p class="text-center mb-5">Rotate through the product images to see more details.</p>
<div class="flex space-x-3">
<button class="bg-red-600 text-white font-bold py-2 px-4 rounded-lg shadow-md hover:bg-red-700 dark:hover:bg-red-500 transition duration-200">Previous</button>
<button class="bg-yellow-400 text-gray-900 font-bold py-2 px-4 rounded-lg shadow-md hover:bg-yellow-500 dark:bg-green-600 dark:text-white dark:hover:bg-green-500 transition duration-200">Next</button>
</div>
<div class="mt-5">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-yellow-400 dark:border-green-500" />
<p class="mt-2 text-center font-medium">Customer Review</p>
</div>
</div>Componentes relacionados
Componente de visor Neumorphic 360
Un componente de visor de 360° con diseño de neumorfismo, esquema de color triádico (ejemplo: azul claro, rosa, amarillo-naranja) y complejidad moderada para aplicaciones de redes sociales. El componente es responsivo, admite el modo oscuro mediante clases Tailwind y utiliza picsum.photos para las imágenes y randomuser.me para los avatares. No se requiere JavaScript.
Visor retro 360
Componente de visor retro de 360° con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS. Utiliza imágenes de marcador de posición de picsum.photos.
Componente de visor de 360°
Un componente de visor de 360° diseñado con un estilo esqueuomórfico, utilizando un esquema de color en escala de grises. Cuenta con una interfaz de complejidad media adecuada para aplicaciones de redes sociales, que admite temas claros y oscuros.