Pantalla de 360°

Componente Visor 360

Un componente de visor de 360 grados con diseño de cristal, combinación de colores monocromática y complejidad moderada. Está diseñado para fines de blog/contenido, es responsivo y admite el modo oscuro usando Tailwind CSS. No se incluye JavaScript, solo HTML con clases Tailwind. Utiliza picsum.photos para las imágenes.

Abrir vista previa

                
<div class="dark:bg-gray-900 bg-gray-100 flex items-center justify-center min-h-screen p-4">
  <div class="bg-white dark:bg-gray-800 backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 rounded-xl shadow-lg p-6 w-full max-w-md border border-gray-200 dark:border-gray-700">
    <div class="text-center mb-6">
      <h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-2">360° Product Viewer</h2>
      <p class="text-gray-600 dark:text-gray-300">Experience the product from every angle.</p>
    </div>

    <div class="relative mb-6 rounded-lg overflow-hidden border border-gray-300 dark:border-gray-600 aspect-video">
      <!-- Placeholder for 360 viewer - In a real scenario, this would be a series of images or a specialized viewer library -->
      <img src="https://picsum.photos/600/400?random=1" alt="Product View 1" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-100" id="viewer-image">
      <img src="https://picsum.photos/600/400?random=2" alt="Product View 2" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-0">
      <img src="https://picsum.photos/600/400?random=3" alt="Product View 3" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-0">
    </div>

    <div class="flex justify-center space-x-2 mb-6">
      <button class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-300">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
      </button>
      <button class="p-3 rounded-full bg-blue-500 hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 transition duration-300">
        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </button>
    </div>

    <div class="text-center text-gray-700 dark:text-gray-300 text-sm">
      <p>Drag or use arrows to rotate view (interactive features would require JavaScript).</p>
    </div>
  </div>
</div>

Componente de visor de 360°

Un componente de visor 360° responsivo con microinteracciones para redes sociales, con temas claros y oscuros que utilizan colores análogos y complejidad moderada.

Abrir vista previa

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">

  <!-- 360° Viewer Component -->
  <div class="relative w-full max-w-sm md:max-w-md lg:max-w-lg mb-8 group">
    
    <!-- Image Stack (simulating 360 view) -->
    <div class="relative w-full h-80 rounded-lg overflow-hidden shadow-lg group-hover:scale-105 transition-transform duration-300">
      <!-- Base Image -->
      <img src="https://picsum.photos/600/400?random=1" alt="Product View 1" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-100 group-hover:opacity-0">
      <!-- Layered Images (for hover effect) -->
      <img src="https://picsum.photos/600/400?random=2" alt="Product View 2" class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300 opacity-0 group-hover:opacity-100">
    </div>

    <!-- Microinteraction: Viewfinder effect -->
    <div class="absolute inset-0 border-4 border-transparent group-hover:border-blue-400 dark:group-hover:border-blue-600 rounded-lg pointer-events-none transition-all duration-300"></div>

    <!-- Microinteraction: "Drag to spin" hint -->
    <div class="absolute bottom-4 left-1/2 -translate-x-1/2 bg-black bg-opacity-70 text-white text-xs px-3 py-1.5 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      Drag to spin
    </div>

    <!-- Microinteraction: Navigation Dots -->
    <div class="absolute bottom-4 right-4 flex space-x-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      <span class="block w-2.5 h-2.5 bg-white rounded-full transition-colors duration-200 hover:bg-blue-400 dark:hover:bg-blue-600"></span>
      <span class="block w-2.5 h-2.5 bg-gray-400 rounded-full transition-colors duration-200 hover:bg-blue-400 dark:hover:bg-blue-600"></span>
      <span class="block w-2.5 h-2.5 bg-gray-400 rounded-full transition-colors duration-200 hover:bg-blue-400 dark:hover:bg-blue-600"></span>
    </div>

  </div>

  <!-- Social Media Context (Example) -->
  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
    <div class="flex items-center mb-4">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full object-cover mr-3">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-100">Jane Doe</p>
        <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300 mb-4">
      Check out this amazing new product! What do you think of the 360&deg; view?
    </p>
    <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
      <div class="flex items-center hover:text-blue-500 dark:hover:text-blue-500 cursor-pointer transition-colors duration-200">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21H3v-3.371a2 2 0 01.781-1.608l1.609-1.609A5 5 0 0112 11.206V10z"></path></svg>
        <span>120 Likes</span>
      </div>
      <div class="flex items-center hover:text-blue-500 dark:hover:text-blue-500 cursor-pointer transition-colors duration-200">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
        <span>34 Comments</span>
      </div>
      <div class="flex items-center hover:text-blue-500 dark:hover:text-blue-500 cursor-pointer transition-colors duration-200">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M19 15l1-2 2-2M15 15l-1-2-2-2M18 19 21 21M9 19l3 2 3-2M5 19l-3 2-2-2M13 13c0-2-3-3-3-3s-3 1-3 3-1 4 2 5 2 2-3 2-4-1-4-1"></path></svg>
        <span>Share</span>
      </div>
    </div>
  </div>

</div>

<style>
  /* This is a simplified simulation. A true 360 viewer would use JavaScript to dynamically change images based on drag. */
  /* The hover effects provide a basic microinteraction experience. */
</style>

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.

Abrir vista previa

                <div class="dark:bg-stone-900 bg-amber-50 relative h-screen flex flex-col items-center justify-center font-mono">
  
  <!-- Brutalist Border -->
  <div class="absolute inset-0 border-8 border-stone-950 dark:border-amber-50"></div>

  <div class="relative z-10 p-8 md:p-12 lg:p-16 bg-fuchsia-700 dark:bg-teal-700 text-amber-50 dark:text-stone-900 
                      border-4 border-stone-950 dark:border-amber-50 
                      shadow-[8px_8px_0_0_#1c1917] dark:shadow-[8px_8px_0_0_#fcd34d]">
    
    <h1 class="text-4xl md:text-5xl lg:text-6xl 
               font-extrabold mb-6 
               uppercase 
               border-b-4 border-amber-50 dark:border-stone-900 
               pb-2">
      360° Viewer
    </h1>
    
    <div class="relative w-full aspect-video 
                bg-stone-950 dark:bg-amber-50 
                border-4 border-stone-950 dark:border-amber-50 
                overflow-hidden
                mb-6">
      <!-- Placeholder for 360 image - in a real scenario, this would be a JS-powered viewer -->
      <img src="https://picsum.photos/seed/360view/800/450" 
           alt="360 degree view placeholder" 
           class="w-full h-full object-cover opacity-70">
      <div class="absolute inset-0 flex items-center justify-center">
        <p class="text-amber-50 dark:text-stone-900 text-xl md:text-2xl lg:text-3xl font-bold detection-sm:hidden">
          Content Placeholder
        </p>
      </div>
    </div>
    
    <p class="text-lg md:text-xl leading-relaxed mb-6">
      Explore this object from every angle. 
      This brutalist design emphasizes raw functionality and stark contrasts. 
      A complementary color scheme of deep fuchsia and teal (or amber and dark stone in dark mode) enhances the visual tension.
    </p>
    
    <div class="flex justify-between items-center">
      <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/75.jpg" 
             alt="Author Avatar" 
             class="w-12 h-12 md:w-16 md:h-16 rounded-full 
                    border-4 border-stone-950 dark:border-amber-50 
                    shadow-[4px_4px_0_0_#1c1917] dark:shadow-[4px_4px_0_0_#fcd34d]">
        <span class="text-xl font-bold">J. Doe</span>
      </div>
      <a href="#" class="inline-block px-6 py-3 
                           bg-stone-950 dark:bg-amber-50 
                           text-amber-50 dark:text-stone-900 
                           uppercase font-bold 
                           border-4 border-stone-950 dark:border-amber-50 
                           shadow-[6px_6px_0_0_#8B0000] dark:shadow-[6px_6px_0_0_#2F4F4F]
                           hover:shadow-none hover:translate-x-1 hover:translate-y-1 transition-all duration-200">
        Learn More
      </a>
    </div>

  </div>
</div>

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.

Abrir vista previa

                <div class="flex flex-col items-center justify-center dark:bg-gray-800 bg-gray-200 min-h-screen p-5">
    <h2 class="text-3xl font-bold mb-5 text-gray-900 dark:text-white">360° Viewer</h2>
    <div class="relative w-full max-w-xl">
        <div class="overflow-hidden rounded-lg shadow-lg border border-gray-300 dark:border-gray-700">
            <img src="https://picsum.photos/600/400" alt="360° View" class="w-full h-auto transition-transform duration-500 ease-in-out transform hover:scale-105" />
            <div class="absolute inset-0 flex items-center justify-center">
                <button class="bg-blue-500 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-500 text-white font-bold py-2 px-4 rounded-full transition-all duration-200">Rotate Left</button>
                <button class="bg-green-500 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-500 text-white font-bold py-2 px-4 rounded-full transition-all duration-200 ml-4">Rotate Right</button>
            </div>
        </div>
    </div>
    <div class="flex justify-between w-full max-w-xl mt-4">
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
        <div class="flex flex-col items-center">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-gray-300 dark:border-gray-700 mb-2" />
            <p class="text-xl font-semibold text-gray-900 dark:text-white">User Name</p>
        </div>
    </div>
</div>

Componente de visor de 360°

Un sencillo componente de visor de 360° diseñado para el comercio electrónico, con microinteracciones y una combinación de colores en tonos tierra, con soporte para el modo oscuro.

Abrir vista previa

                <div class="max-w-xl mx-auto p-4">
    <h2 class="text-2xl font-bold text-brown-800 dark:text-brown-300 mb-4">Product 360° Viewer</h2>
    <div class="relative w-full h-72 overflow-hidden rounded-lg shadow-lg border border-brown-200 dark:border-brown-700">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="object-cover h-full w-full transition-transform duration-300 ease-in-out hover:scale-105">
        <div class="absolute inset-0 flex items-center justify-center">
            <button class="bg-brown-600 text-white font-semibold rounded-full px-4 py-2 transition-transform duration-300 ease-in-out transform hover:scale-110 dark:bg-brown-700">Rotate</button>
        </div>
    </div>
    <div class="mt-4">
        <h3 class="text-xl font-semibold text-brown-700 dark:text-brown-200">Product Name</h3>
        <p class="text-brown-600 dark:text-brown-400">This is a brief description of the product. It is made from high-quality materials and is perfect for your needs.</p>
        <div class="flex items-center mt-2">
            <span class="text-lg font-bold text-brown-800 dark:text-brown-300">$49.99</span>
        </div>
    </div>
</div>

Componente Visor 360

Componente de visor de 360 grados responsivo con soporte de modo oscuro.

Abrir vista previa

                <div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-64 h-64">
    <div class="absolute inset-0 transform rotate-45 bg-gray-300 dark:bg-gray-700"></div>
    <div class="absolute inset-0 transform -rotate-45 bg-gray-400 dark:bg-gray-600"></div>
    <div class="absolute inset-4 flex justify-center items-center bg-white dark:bg-gray-800">
      <div class="w-32 h-32 bg-gray-200 dark:bg-gray-700 rounded-full flex items-center justify-center">
        <svg class="w-16 h-16 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14m-7 0l-4.553 2.276A1 1 0 013 15.382v-6.764a1 1 0 011.447-.894L7 10m0 4v6a1 1 0 001 1h3v-60H8a1 1 0 00-1 1v6zmz"></path></svg>
      </div>
    </div>
  </div>
</div>

PastelBrutalist360AssetViewer

Un componente de Asset Viewer de 360° simple y receptivo con un estilo de diseño brutalista y una combinación de colores rosa pastel. Diseñado para tableros, cuenta con un marcador de posición de imagen estática (que simula una vista de 360°), botones de control no funcionales y pantalla de información. Construido con Tailwind CSS, es compatible con el modo oscuro y muestra una estética cruda y audaz con bordes gruesos y sombras muy desplazadas.

Abrir vista previa

                <!-- Start of Pastel Brutalist 360 Asset Viewer Component -->
<div class="w-full max-w-lg bg-pink-100 dark:bg-slate-800 border-4 border-pink-500 dark:border-pink-600 p-4 sm:p-6 shadow-[8px_8px_0px_#ec4899] dark:shadow-[8px_8px_0px_#db2777] hover:shadow-[4px_4px_0px_#ec4899] dark:hover:shadow-[4px_4px_0px_#db2777] transition-all duration-200">
  <!-- Header/Title -->
  <div class="mb-4 pb-2 border-b-4 border-pink-500 dark:border-pink-600">
    <h2 class="text-2xl sm:text-3xl font-bold text-pink-700 dark:text-pink-300 uppercase tracking-wider">
      360° Asset View
    </h2>
  </div>

  <!-- Image container -->
  <div class="relative w-full aspect-video bg-pink-50 dark:bg-slate-700 border-2 border-pink-300 dark:border-pink-500 mb-4">
    <img src="https://picsum.photos/seed/asset360viewer/800/450" alt="360 degree rotating view of an asset" class="w-full h-full object-cover"/>
    <!-- Optional: Visual cue for interactivity -->
    <div class="absolute inset-0 flex items-center justify-center opacity-30 hover:opacity-60 transition-opacity">
      <svg class="w-16 h-16 text-pink-600 dark:text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
    </div>
  </div>

  <!-- Static "Controls" -->
  <div class="flex flex-col sm:flex-row justify-around items-center space-y-3 sm:space-y-0 sm:space-x-3">
    <button type="button" class="w-full sm:w-auto px-5 py-2.5 bg-pink-300 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 text-pink-800 dark:text-pink-100 font-bold uppercase border-2 border-pink-500 dark:border-pink-700 active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150">
      Left
    </button>
    <button type="button" class="w-full sm:w-auto px-5 py-2.5 bg-pink-300 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 text-pink-800 dark:text-pink-100 font-bold uppercase border-2 border-pink-500 dark:border-pink-700 active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150">
      Zoom
    </button>
    <button type="button" class="w-full sm:w-auto px-5 py-2.5 bg-pink-300 hover:bg-pink-400 dark:bg-pink-600 dark:hover:bg-pink-700 text-pink-800 dark:text-pink-100 font-bold uppercase border-2 border-pink-500 dark:border-pink-700 active:translate-x-0.5 active:translate-y-0.5 transition-all duration-150">
      Right
    </button>
  </div>

  <!-- Dashboard-like Info Footer -->
  <div class="mt-6 pt-3 border-t-2 border-pink-300 dark:border-pink-500 text-sm text-pink-600 dark:text-pink-400">
    <p>Asset ID: <span class="font-semibold">XYZ-789</span> | Status: <span class="font-semibold text-green-600 dark:text-green-400">Active</span></p>
    <p class="mt-1">Hint: This is a static visual representation.</p>
  </div>
</div>
<!-- End of Pastel Brutalist 360 Asset Viewer Component -->

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.

Abrir vista previa

                <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>

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.

Abrir vista previa

                <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>

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.

Abrir vista previa

                <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>

Categorías