Home
Cristian
Dynamic Google Card

Dynamic Google Card

This tailwind example is contributed by Cristian, on 20-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Product Showcase, Product card,simulation,copy,dummy,miniature,like,Article Card, Blog page card, Article card

Card Product Mockup Blog Card

Author Cristian

1.1k

Fork Fullscreen

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Product Information</title>
  
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Roboto:wght@400;500&display=swap" rel="stylesheet" />
  
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* Para la transición de max-height en los paneles del acordeón */
    .accordion-panel {
      transition: max-height 0.8s cubic-bezier(0, 0.4, 0, 1);
    }
  </style>
</head>
<body class="p-4 lg:p-12 font-sans" style="font-family: 'Open Sans', 'Roboto', Arial, sans-serif; color: #3c4043;">
  <div class="max-w-[1200px] mx-auto">
    
    <section class="product-infomation">
      <div class="flex flex-col lg:flex-row bg-[#e8edd7] rounded-[32px] lg:h-[778px]">
        
        <div class="w-full lg:w-1/2 h-full">
          <img 
            id="heroImage"
            class="w-full h-full object-cover lg:rounded-l-[32px] rounded-t-[32px] transition-opacity duration-1000" 
            aria-hidden="true" 
            src="https://lh3.googleusercontent.com/nz1xxtKWgEddMXQgK7JRT-j_xoU4KNnQpoCNKrtNHTRBTl6MTHdiQXMjYuONBy59780HS5bU8zYqlAEZY6wLccUmxPgs-qps-y0z=rw-e365-w800" 
            alt=""
          />
        </div>
        
        <div class="w-full lg:w-1/2">
          <div class="p-10">
            
            <div id="backBtn" class="flex items-center mb-6 cursor-pointer">
              <span id="backIcon" class="hidden mr-6">
                
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[#5f6368]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
              </span>
              <span>Help on the go</span>
            </div>
            
            <h2 id="productTitle" class="text-[2.2rem] font-semibold leading-tight mb-6 transition-all duration-600">
              Help from Google, right on your wrist.
            </h2>
            
            <section class="accordion">
              <div class="bg-[#dce4c3] rounded-[20px]">
                
                <div class="accordion-header flex justify-between items-center p-6 cursor-pointer transition-all duration-300">
                  <div class="accordion-title flex-1 mr-6 text-left text-[16px] leading-6 font-bold transition-all duration-200">
                    Google Maps helps you find your way.
                  </div>
                  <span class="accordion-icon h-[30px] w-[30px] rounded-full bg-white flex items-center justify-center">
                    
                    <svg class="w-4 h-4 text-[#5f6368] transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                  </span>
                </div>
                <div class="accordion-panel overflow-hidden max-h-0 px-6">
                  <p class="mb-4 leading-6">
                    Turn-by-turn directions and an interactive view help you see where you are and get to where you're going.
                  </p>
                  <img aria-hidden="true" loading="lazy" src="https://storage.googleapis.com/mannequin/blobs/7a807f74-7d99-4e49-8829-f9b9c852b34d.svg" alt="" width="32">
                </div>
                
                <div class="accordion-header flex justify-between items-center p-6 cursor-pointer transition-all duration-300">
                  <div class="accordion-title flex-1 mr-6 text-left text-[16px] leading-6 font-bold transition-all duration-200">
                    Google Wallet lets you leave your cards behind.
                  </div>
                  <span class="accordion-icon h-[30px] w-[30px] rounded-full bg-white flex items-center justify-center">
                    <svg class="w-4 h-4 text-[#5f6368] transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                  </span>
                </div>
                <div class="accordion-panel overflow-hidden max-h-0 px-6">
                  <p class="mb-4 leading-6">
                    Add your cards digitally to Google Wallet, then use Google Pay to speed through checkout with quick, contactless payments – in shops and on public transport.
                  </p>
                  <img aria-hidden="true" loading="lazy" src="https://storage.googleapis.com/mannequin/blobs/ffa5ffcc-431e-4ddd-94cf-a031fb0d917d.svg" alt="" width="32">
                </div>
                
                <div class="accordion-header flex justify-between items-center p-6 cursor-pointer transition-all duration-300">
                  <div class="accordion-title flex-1 mr-6 text-left text-[16px] leading-6 font-bold transition-all duration-200">
                    Google Assistant helps you get more done with your voice.
                  </div>
                  <span class="accordion-icon h-[30px] w-[30px] rounded-full bg-white flex items-center justify-center">
                    <svg class="w-4 h-4 text-[#5f6368] transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                  </span>
                </div>
                <div class="accordion-panel overflow-hidden max-h-0 px-6">
                  <p class="mb-4 leading-6">
                    Play music, respond to texts, get directions and more on your wrist. Just say 'Hey Google' to get started.
                  </p>
                  <img aria-hidden="true" loading="lazy" src="https://storage.googleapis.com/mannequin/blobs/abed3c42-b042-4672-baf0-073fa628238f.svg" alt="" width="32">
                </div>
              </div>
            </section>
          </div>
        </div>
      </div>
    </section>
  </div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
      const accordionHeaders = document.querySelectorAll('.accordion-header'),
            productTitleEl   = document.getElementById('productTitle'),
            backEl           = document.getElementById('backBtn'),
            backIconEl       = document.getElementById('backIcon'),
            heroImage        = document.getElementById('heroImage');

// Array de imágenes para cambiar el hero image
      const images = [
        'https://lh3.googleusercontent.com/nz1xxtKWgEddMXQgK7JRT-j_xoU4KNnQpoCNKrtNHTRBTl6MTHdiQXMjYuONBy59780HS5bU8zYqlAEZY6wLccUmxPgs-qps-y0z=rw-e365-w800',
        'https://lh3.googleusercontent.com/vXIxKa19RbtY2WAeVcNi_DgwWuNVJsY4mA_PDFQfpM5_jkhAnHxrqDM7Na95RqHkMvODppqzN-bJHc7iWEZ1VLLO4bCTzy9i5tM=rw-e365-w800',
        'https://lh3.googleusercontent.com/29aEaKMXRAbMEyPyeE4-PA4Nad6BRMT7vbrT8uw5WbG6mg5CPMc2yytofXtPgNRCAmpbZnLPUYYX-0SbWxWe66xaLFvpyxj68_M=rw-e365-w800',
        'https://lh3.googleusercontent.com/iX2B3kXn78xv19tKAT3-WvZ6PqpwKdKznLmmQsfO-r0FhkWHouWLl3u-5k2QDxzeRFscr6lMFDxXzJ_zWXpJo-Bj4y2PUn_yGw=rw-e365-w800'
      ];

// Función para cerrar todos los paneles del acordeón
      const closeAccordions = () => {
        document.querySelectorAll('.accordion-header').forEach(header => {
          header.querySelector('.accordion-title').classList.remove('active');
          const panel = header.nextElementSibling;
          panel.style.maxHeight = "0px";
          panel.style.paddingBottom = "0px";
          header.querySelector('.accordion-icon svg').classList.remove('rotate-180');
        });
      };

// Función para manejar el clic en cada encabezado del acordeón
      accordionHeaders.forEach((header, index) => {
        header.addEventListener('click', function() {
          // Cierra todos los acordeones abiertos
          closeAccordions();

// Activa el botón "back" si no lo está
          if (!backEl.classList.contains('active')) {
            backEl.classList.add('active');
            backIconEl.classList.remove('hidden');
          }

// Cambia el estado del título
          this.querySelector('.accordion-title').classList.toggle('active');
          productTitleEl.classList.add('active');

// Muestra u oculta el panel correspondiente
          const panel = this.nextElementSibling;
          if (panel.style.maxHeight && panel.style.maxHeight !== "0px") {
            panel.style.maxHeight = "0px";
            panel.style.paddingBottom = "0px";
          } else {
            panel.style.maxHeight = (panel.scrollHeight + 24) + "px";
            panel.style.paddingBottom = "24px";
          }

// Rota el icono (usa rotate-180 de Tailwind)
          const iconSvg = this.querySelector('.accordion-icon svg');
          iconSvg.classList.toggle('rotate-180');

// Cambia la imagen principal con efecto de fundido
          heroImage.classList.add('opacity-0');
          setTimeout(() => {
            heroImage.src = images[index + 1] || images[0];
            heroImage.classList.remove('opacity-0');
          }, 300);
        });
      });

// Función para volver al estado inicial
      const goBack = () => {
        if (backEl.classList.contains('active')) {
          backEl.classList.remove('active');
          backIconEl.classList.add('hidden');
          productTitleEl.classList.remove('active');
          closeAccordions();
          // Restablece la imagen principal
          heroImage.classList.add('opacity-0');
          setTimeout(() => {
            heroImage.src = images[0];
            heroImage.classList.remove('opacity-0');
          }, 300);
        }
      };

backEl.addEventListener('click', goBack);
    });
  </script>
</body>
</html>

Related Examples