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.
Código HTML
<div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">360° Viewer</h2>
<div class="mt-4 w-full max-w-md h-64 border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden shadow-inner">
<img src="https://picsum.photos/600/400?random=1" alt="360° View" class="w-full h-full object-cover transition-transform hover:scale-105 duration-300" />
</div>
<div class="mt-4 flex items-center">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
</div>
<div class="ml-3">
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">John Doe</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Posted 1 hour ago</p>
</div>
</div>
<div class="mt-4">
<button class="px-4 py-2 text-white bg-gray-800 rounded hover:bg-gray-700 dark:bg-gray-600 dark:hover:bg-gray-500">Interact</button>
</div>
</div>Componentes relacionados
Componente de visor de 360°
Un componente de visor de 360° que utiliza el estilo de diseño Glassmorphism con efectos responsivos y compatibilidad con temas oscuros.
Componente de visor de 360°
Un componente de visor de 360° con diseño esqueuomórfico, combinación de colores triádica y compatibilidad con temas oscuros. Diseñado para paneles de control, visualización de datos y paneles de control.
Componente de visor de 360°
Un componente de visor de 360° con diseño esqueuomórfico, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.