Componentes de búsqueda

Categorías

Componentes Fichas de producto

Fichas de producto

Visualización de la información del producto en formato de tarjeta

Componente Tarjetas de producto

Tarjetas de producto simples y receptivas con un diseño artístico/acuarela, combinación de colores complementaria y compatibilidad total con el modo oscuro, adecuadas para una cartera.

Abrir Vista previa

                <div class="bg-gradient-to-br from-purple-50 via-pink-50 to-orange-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-6 sm:p-8 lg:p-12 min-h-screen font-sans">
  <div class="container mx-auto px-4">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 text-gray-800 dark:text-gray-100 drop-shadow-lg leading-tight">
      Our Artistic Creations
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Product Card 1 -->
      <div class="group relative rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out
                  transform hover:-translate-y-2
                  bg-white dark:bg-gray-800
                  border border-pink-200 dark:border-pink-800
                  bg-blend-multiply bg-cover bg-center"
           style="background-image: url('https://picsum.photos/id/107/600/400?blur=1');">
        <div class="absolute inset-0 bg-gradient-to-t from-pink-300/80 via-transparent to-transparent dark:from-pink-900/80 group-hover:from-pink-400/90 group-hover:dark:from-pink-800/90 transition-all duration-300"></div>
        <img src="https://picsum.photos/id/107/600/400" alt="Abstract Painting" class="w-full h-64 object-cover object-center group-hover:scale-105 transition-transform duration-300 mix-blend-multiply opacity-80 group-hover:opacity-100" />

        <div class="relative p-6 pt-52 text-white dark:text-gray-100 flex flex-col justify-end min-h-[250px]">
          <h3 class="text-2xl font-bold mb-2 drop-shadow-md">Sunset Reflection</h3>
          <p class="text-sm mb-4 opacity-90 drop-shadow-sm">A vibrant watercolor capturing the essence of a serene sunset over water.</p>
          <div class="flex items-center justify-between text-lg font-semibold">
            <span>$120.00</span>
            <button class="px-4 py-2 bg-gradient-to-r from-pink-500 to-red-500 hover:from-pink-600 hover:to-red-600 dark:from-pink-700 dark:to-red-700 dark:hover:from-pink-800 dark:hover:to-red-800 text-white rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="group relative rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out
                  transform hover:-translate-y-2
                  bg-white dark:bg-gray-800
                  border border-orange-200 dark:border-orange-800
                  bg-blend-multiply bg-cover bg-center"
             style="background-image: url('https://picsum.photos/id/105/600/400?blur=1');">
          <div class="absolute inset-0 bg-gradient-to-t from-orange-300/80 via-transparent to-transparent dark:from-orange-900/80 group-hover:from-orange-400/90 group-hover:dark:from-orange-800/90 transition-all duration-300"></div>
          <img src="https://picsum.photos/id/105/600/400" alt="Figurative Sculpture" class="w-full h-64 object-cover object-center group-hover:scale-105 transition-transform duration-300 mix-blend-multiply opacity-80 group-hover:opacity-100" />

          <div class="relative p-6 pt-52 text-white dark:text-gray-100 flex flex-col justify-end min-h-[250px]">
              <h3 class="text-2xl font-bold mb-2 drop-shadow-md">Forest Whisper</h3>
              <p class="text-sm mb-4 opacity-90 drop-shadow-sm">An impressionistic oil painting capturing the mysterious allure of a deep forest.</p>
              <div class="flex items-center justify-between text-lg font-semibold">
                  <span>$180.00</span>
                  <button class="px-4 py-2 bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 dark:from-orange-700 dark:to-yellow-700 dark:hover:from-orange-800 dark:hover:to-yellow-800 text-white rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
                      View Details
                  </button>
              </div>
          </div>
      </div>

      <!-- Product Card 3 -->
      <div class="group relative rounded-3xl overflow-hidden shadow-xl hover:shadow-2xl transition-all duration-300 ease-in-out
                  transform hover:-translate-y-2
                  bg-white dark:bg-gray-800
                  border border-purple-200 dark:border-purple-800
                  bg-blend-multiply bg-cover bg-center"
             style="background-image: url('https://picsum.photos/id/106/600/400?blur=1');">
          <div class="absolute inset-0 bg-gradient-to-t from-purple-300/80 via-transparent to-transparent dark:from-purple-900/80 group-hover:from-purple-400/90 group-hover:dark:from-purple-800/90 transition-all duration-300"></div>
          <img src="https://picsum.photos/id/106/600/400" alt="Abstract Design" class="w-full h-64 object-cover object-center group-hover:scale-105 transition-transform duration-300 mix-blend-multiply opacity-80 group-hover:opacity-100" />

          <div class="relative p-6 pt-52 text-white dark:text-gray-100 flex flex-col justify-end min-h-[250px]">
              <h3 class="text-2xl font-bold mb-2 drop-shadow-md">Urban Energy</h3>
              <p class="text-sm mb-4 opacity-90 drop-shadow-sm">A dynamic acrylic work reflecting the vibrant chaos and beauty of city life.</p>
              <div class="flex items-center justify-between text-lg font-semibold">
                  <span>$95.00</span>
                  <button class="px-4 py-2 bg-gradient-to-r from-purple-500 to-indigo-500 hover:from-purple-600 hover:to-indigo-600 dark:from-purple-700 dark:to-indigo-700 dark:hover:from-purple-800 dark:hover:to-indigo-800 text-white rounded-full transition-all duration-300 transform hover:scale-105 shadow-lg">
                      View Details
                  </button>
              </div>
          </div>
      </div>

    </div>
  </div>
</div>

Componente de tarjeta de trabajo análogo skeuomórfico

Un componente de tarjeta de trabajo receptivo con un estilo de diseño esqueuomórfico, que utiliza un esquema de color análogo, adecuado para bolsas de trabajo y plataformas de desarrollo profesional. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-8 bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-gray-800 dark:via-gray-900 dark:to-black min-h-screen flex items-center justify-center font-sans">

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full max-w-7xl">

    <!-- Job Card 1 -->
    <div class="relative rounded-xl shadow-2xl overflow-hidden
                bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
                transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
                border-t border-l border-indigo-200 dark:border-gray-600
                before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
                dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">

      <div class="relative p-6 space-y-4">
        <!-- Top Section - Company Logo & Title -->
        <div class="flex items-center space-x-4">
          <img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/68/100/100" alt="Company Logo">
          <div>
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Senior UX Designer</h3>
            <p class="text-md text-purple-700 dark:text-purple-400">Acme Inc.</p>
          </div>
        </div>

        <!-- Job Details -->
        <div class="space-y-2 text-indigo-700 dark:text-indigo-200">
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636m11.314 11.314L12.757 13.973a1.998 1.998 0 00-2.828 0L5.636 12.586A".fill-rule="evenodd" clip-rule="evenodd"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
            Remote
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
            Full-time
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Posted 2 days ago
          </p>
        </div>

        <!-- Salary Range -->
        <p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$90,000 - $120,000 / year</p>

        <!-- Tags -->
        <div class="flex flex-wrap gap-2">
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">UX Design</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Figma</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Research</span>
        </div>

        <!-- Apply Button -->
        <button class="w-full py-3 rounded-lg text-lg font-bold
                       bg-gradient-to-br from-indigo-500 to-purple-600 text-white
                       shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
                       transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
                       border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
                       before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
                       dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
                       relative overflow-hidden group">
          <span class="relative z-10">Apply Now</span>
          <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
        </button>
      </div>
    </div>

    <!-- Job Card 2 -->
    <div class="relative rounded-xl shadow-2xl overflow-hidden
                bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
                transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
                border-t border-l border-indigo-200 dark:border-gray-600
                before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
                dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">

      <div class="relative p-6 space-y-4">
        <!-- Top Section - Company Logo & Title -->
        <div class="flex items-center space-x-4">
          <img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/88/100/100" alt="Company Logo">
          <div>
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Marketing Manager</h3>
            <p class="text-md text-purple-700 dark:text-purple-400">Global Solutions</p>
          </div>
        </div>

        <!-- Job Details -->
        <div class="space-y-2 text-indigo-700 dark:text-indigo-200">
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
            Hybrid (NYC)
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
            Full-time
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Posted 5 days ago
          </p>
        </div>

        <!-- Salary Range -->
        <p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$75,000 - $100,000 / year</p>

        <!-- Tags -->
        <div class="flex flex-wrap gap-2">
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Digital Marketing</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">SEO</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Content</span>
        </div>

        <!-- Apply Button -->
        <button class="w-full py-3 rounded-lg text-lg font-bold
                       bg-gradient-to-br from-indigo-500 to-purple-600 text-white
                       shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
                       transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
                       border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
                       before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
                       dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
                       relative overflow-hidden group">
          <span class="relative z-10">Apply Now</span>
          <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
        </button>
      </div>
    </div>

    <!-- Job Card 3 -->
    <div class="relative rounded-xl shadow-2xl overflow-hidden
                bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-700 dark:to-gray-800
                transform transition-all duration-300 hover:scale-105 hover:shadow-3xl
                border-t border-l border-indigo-200 dark:border-gray-600
                before:absolute before:inset-0 before:rounded-xl before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.7),inset_-2px_-2px_4px_rgba(0,0,0,0.1)]
                dark:before:shadow-[inset_2px_2px_4px_rgba(255,255,255,0.05),inset_-2px_-2px_4px_rgba(0,0,0,0.4)]">

      <div class="relative p-6 space-y-4">
        <!-- Top Section - Company Logo & Title -->
        <div class="flex items-center space-x-4">
          <img class="w-16 h-16 rounded-full object-cover shadow-md border-2 border-indigo-300 dark:border-gray-500" src="https://picsum.photos/id/98/100/100" alt="Company Logo">
          <div>
            <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Frontend Developer</h3>
            <p class="text-md text-purple-700 dark:text-purple-400">Tech Innovators</p>
          </div>
        </div>

        <!-- Job Details -->
        <div class="space-y-2 text-indigo-700 dark:text-indigo-200">
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657m11.314-11.314L12.757 3.09a1.998 1.998 0 00-2.828 0L5.636 5.636m11.314 11.314L12.757 2.247c-.504-.504-1.32-.504-1.824 0L6.343 16.657m11.314-11.314L13.414 7.027a1.998 1.998 0 01-2.828 0L6.343 5.636"></path></svg>
            On-site (London)
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M12 8c1.657 0 3 .895 3 2s-1.343 2-3 2-3-.895-3-2 1.343-2 3-2zM12 14c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><circle cx="12" cy="12" r="10"></circle></svg>
            Full-time
          </p>
          <p class="flex items-center text-sm">
            <svg class="w-4 h-4 mr-2 text-purple-600 dark:text-purple-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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Posted 1 week ago
          </p>
        </div>

        <!-- Salary Range -->
        <p class="text-lg font-semibold text-pink-700 dark:text-pink-300">$80,000 - $110,000 / year</p>

        <!-- Tags -->
        <div class="flex flex-wrap gap-2">
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">React</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">Tailwind CSS</span>
          <span class="px-3 py-1 rounded-full text-xs font-semibold
                       bg-purple-200 text-purple-800 dark:bg-gray-600 dark:text-gray-200
                       shadow-sm border border-purple-300 dark:border-gray-500">JavaScript</span>
        </div>

        <!-- Apply Button -->
        <button class="w-full py-3 rounded-lg text-lg font-bold
                       bg-gradient-to-br from-indigo-500 to-purple-600 text-white
                       shadow-lg shadow-indigo-400/50 dark:shadow-purple-700/50
                       transform transition-transform duration-200 hover:scale-[1.02] active:scale-[0.98]
                       border-b-2 border-r-2 border-indigo-700 dark:border-purple-800
                       before:absolute before:inset-0 before:rounded-lg before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.4),inset_-1px_-1px_2px_rgba(0,0,0,0.2)]
                       dark:before:shadow-[inset_1px_1px_2px_rgba(255,255,255,0.1),inset_-1px_-1px_2px_rgba(0,0,0,0.4)]
                       relative overflow-hidden group">
          <span class="relative z-10">Apply Now</span>
          <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity duration-200"></span>
        </button>
      </div>
    </div>

  </div>
</div>

ArtDeco_ProductCards_Music

Componente de tarjetas de producto simple y receptivo con una estética Art Deco, con patrones geométricos y una combinación de colores cálidos/atardeceres, adecuados para plataformas de música y audio. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="bg-gradient-to-br from-yellow-100 via-orange-200 to-red-200 p-4 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 min-h-screen font-serif flex items-center justify-center">
  <div class="container mx-auto px-4 py-8">
    <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-center mb-12 tracking-wider text-yellow-900 dark:text-orange-300 drop-shadow-lg leading-tight">
      <span class="block">Curated Sounds</span>
      <span class="block text-3xl md:text-4xl lg:text-5xl mt-2">Golden Age Audio</span>
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Product Card 1 -->
      <div class="relative bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-lg shadow-xl overflow-hidden dark:from-gray-800 dark:to-gray-900 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMjAwTDIwMCAwVjIwMEgweiIgZmlsbD0iI2ZmZTQ0ZSIgb3BhY2l0eT0iMC4yIi8+PC9zdmc>')]
 dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMjAwTDIwMCAwVjIwMEgweiIgZmlsbD0iIzQ0NSIgb3BhY2l0eT0iMC4yIi8+PC9zdmc>')]
          bg-repeat opacity-50"></div>
        <div class="relative z-10 flex flex-col items-center">
          <img src="https://picsum.photos/id/1047/400/300" alt="Vintage Turntable" class="w-full h-48 object-cover rounded-md mb-4 border-2 border-orange-200 dark:border-gray-600 shadow-md">
          <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2 text-center">The Gilded Gramophone</h3>
          <p class="text-sm text-yellow-700 dark:text-gray-400 mb-4 text-center">Experience unparalleled warmth with our meticulously restored vintage turntable. A true centerpiece for any audiophile.</p>
          <div class="text-3xl font-extrabold text-red-600 dark:text-red-400 mb-4">$1,299</div>
          <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-colors duration-300 tracking-wider dark:bg-orange-700 dark:hover:bg-orange-800">
            Add to Collection
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="relative bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-lg shadow-xl overflow-hidden dark:from-gray-800 dark:to-gray-900 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoNDUgMTAwIDEwMCkiIGQ9Ik0wIDIwMEwyMDAgMFYyMDBIMHoiIGZpbGw9IiNmZmU0NGUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
 dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZ1/yMDAwL3N2ZyI+PHBhdGggdHJhbnNmb3JtPSJyb3RhdGUoNDUgMTAwIDEwMCkiIGQ9Ik0wIDIwMEwyMDAgMFYyMDBIMHoiIGZpbGw9IiM0NDUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
          bg-repeat opacity-50"></div>
        <div class="relative z-10 flex flex-col items-center">
          <img src="https://picsum.photos/id/1118/400/300" alt="Art Deco Speakers" class="w-full h-48 object-cover rounded-md mb-4 border-2 border-orange-200 dark:border-gray-600 shadow-md">
          <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2 text-center">Symphony Tower Speakers</h3>
          <p class="text-sm text-yellow-700 dark:text-gray-400 mb-4 text-center">Precision-engineered sound with a sleek Art Deco design. Fill your space with rich, immersive audio.</p>
          <div class="text-3xl font-extrabold text-red-600 dark:text-red-400 mb-4">$849</div>
          <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-colors duration-300 tracking-wider dark:bg-orange-700 dark:hover:bg-orange-800">
            Add to Collection
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="relative bg-gradient-to-br from-yellow-50 to-orange-100 p-6 rounded-lg shadow-xl overflow-hidden dark:from-gray-800 dark:to-gray-900 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl">
        <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwMCAwSDUwTDIwMCAxNTBWMEgiIGZpbGw9IiNmZmU0NGUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
 dark:bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDIwMCAyMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTIwMCAwSDUwTDIwMCAxNTBWMEgiIGZpbGw9IiM0NDUiIG9wYWNpdHk9IjAuMiIvPjwvc3ZnPg==')]
          bg-repeat opacity-50"></div>
        <div class="relative z-10 flex flex-col items-center">
          <img src="https://picsum.photos/id/111/400/300" alt="Wireless Headphones" class="w-full h-48 object-cover rounded-md mb-4 border-2 border-orange-200 dark:border-gray-600 shadow-md">
          <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-300 mb-2 text-center">Aria Wireless Headphones</h3>
          <p class="text-sm text-yellow-700 dark:text-gray-400 mb-4 text-center">Unleash your music with luxurious comfort and crystal-clear sound, wirelessly.</p>
          <div class="text-3xl font-extrabold text-red-600 dark:text-red-400 mb-4">$229</div>
          <button class="bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-full shadow-lg transition-colors duration-300 tracking-wider dark:bg-orange-700 dark:hover:bg-orange-800">
            Add to Collection
          </button>
        </div>
      </div>

    </div>
  </div>
</div>

Componente Tarjetas de producto

Un componente de tarjetas de producto complejo y receptivo para plataformas de entretenimiento/medios, con un diseño orgánico/inspirado en la naturaleza que utiliza una paleta de colores bosque/verde. Incluye soporte para modo oscuro y elementos interactivos.

Abrir Vista previa

                <div class="bg-gradient-to-br from-emerald-50 to-green-100 py-12 px-4 sm:px-6 lg:px-8 dark:from-gray-900 dark:to-gray-950">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl font-extrabold text-green-900 text-center mb-12 dark:text-green-200">
      Explore Our Worlds
    </h2>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Card 1 -->
      <div class="bg-white rounded-3xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out dark:bg-gray-800 border border-green-200 dark:border-gray-700">
        <div class="relative pb-56 sm:pb-64 lg:pb-72">
          <img class="absolute inset-0 h-full w-full object-cover" src="https://picsum.photos/id/237/800/600" alt="Image of a lush forest">
          <div class="absolute inset-0 bg-gradient-to-t from-green-900 via-transparent to-transparent opacity-75 dark:from-gray-900"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <span class="px-3 py-1 bg-green-600 text-white text-xs font-semibold rounded-full dark:bg-green-700">Fantasy</span>
          </div>
        </div>
        <div class="p-6 relative">
          <h3 class="text-2xl font-bold text-green-900 mb-2 dark:text-green-100">Whispers of Eldoria</h3>
          <p class="text-green-700 text-sm mb-4 dark:text-green-300">A captivating tale of ancient magic and forgotten kingdoms. Dive into a world where every creature has a story.</p>
          <div class="flex items-center mb-4">
            <div class="flex -space-x-2 mr-2">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author 1">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Author 2">
            </div>
            <span class="text-green-600 text-sm dark:text-green-400">Feat. Alex & Sarah</span>
          </div>
          <div class="flex justify-between items-center mb-4">
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
              <span class="text-sm">2h 15m</span>
            </div>
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.817-2.034a1 1 0 00-1.175 0l-2.817 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <span class="text-sm font-semibold">4.8</span>
            </div>
          </div>
          <button class="w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">
            <svg class="-ml-1 mr-2 h-5 w-5" 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.752 11.132l-3.398 3.398A1.006 1.006 0 0110 14.828V10.17a1.006 1.006 0 011.354-.98L14.752 11.132z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Start Watching
          </button>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="bg-white rounded-3xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out dark:bg-gray-800 border border-green-200 dark:border-gray-700">
        <div class="relative pb-56 sm:pb-64 lg:pb-72">
          <img class="absolute inset-0 h-full w-full object-cover" src="https://picsum.photos/id/1025/800/600" alt="Image of abstract bioluminescent mushrooms">
          <div class="absolute inset-0 bg-gradient-to-t from-emerald-900 via-transparent to-transparent opacity-75 dark:from-gray-900"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <span class="px-3 py-1 bg-emerald-600 text-white text-xs font-semibold rounded-full dark:bg-emerald-700">Sci-Fi</span>
          </div>
        </div>
        <div class="p-6 relative">
          <h3 class="text-2xl font-bold text-green-900 mb-2 dark:text-green-100">Echoes of the Cosmos</h3>
          <p class="text-green-700 text-sm mb-4 dark:text-green-300">Journey beyond the stars to uncover the secrets of a dying galaxy. A thrilling space opera unfolds.</p>
          <div class="flex items-center mb-4">
            <div class="flex -space-x-2 mr-2">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Author 3">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Author 4">
            </div>
            <span class="text-green-600 text-sm dark:text-green-400">Created by Luna & Kai</span>
          </div>
          <div class="flex justify-between items-center mb-4">
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
              <span class="text-sm">2h 45m</span>
            </div>
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.817-2.034a1 1 0 00-1.175 0l-2.817 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <span class="text-sm font-semibold">4.9</span>
            </div>
          </div>
          <button class="w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">
            <svg class="-ml-1 mr-2 h-5 w-5" 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.752 11.132l-3.398 3.398A1.006 1.006 0 0110 14.828V10.17a1.006 1.006 0 011.354-.98L14.752 11.132z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Start Watching
          </button>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="bg-white rounded-3xl shadow-xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300 ease-in-out dark:bg-gray-800 border border-green-200 dark:border-gray-700">
        <div class="relative pb-56 sm:pb-64 lg:pb-72">
          <img class="absolute inset-0 h-full w-full object-cover" src="https://picsum.photos/id/196/800/600" alt="Image of a serene waterfall">
          <div class="absolute inset-0 bg-gradient-to-t from-lime-900 via-transparent to-transparent opacity-75 dark:from-gray-900"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <span class="px-3 py-1 bg-lime-600 text-white text-xs font-semibold rounded-full dark:bg-lime-700">Adventure</span>
          </div>
        </div>
        <div class="p-6 relative">
          <h3 class="text-2xl font-bold text-green-900 mb-2 dark:text-green-100">The Emerald Quest</h3>
          <p class="text-green-700 text-sm mb-4 dark:text-green-300">Embark on a perilous journey through mystical lands to find the legendary Emerald Heart.</p>
          <div class="flex items-center mb-4">
            <div class="flex -space-x-2 mr-2">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/5.jpg" alt="Author 5">
              <img class="inline-block h-8 w-8 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/6.jpg" alt="Author 6">
            </div>
            <span class="text-green-600 text-sm dark:text-green-400">By The Wilderness Collective</span>
          </div>
          <div class="flex justify-between items-center mb-4">
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
              <span class="text-sm">3h 05m</span>
            </div>
            <div class="flex items-center text-green-700 dark:text-green-300">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.817-2.034a1 1 0 00-1.175 0l-2.817 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <span class="text-sm font-semibold">4.7</span>
            </div>
          </div>
          <button class="w-full flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-600">
            <svg class="-ml-1 mr-2 h-5 w-5" 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.752 11.132l-3.398 3.398A1.006 1.006 0 0110 14.828V10.17a1.006 1.006 0 011.354-.98L14.752 11.132z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            Start Watching
          </button>
        </div>
      </div>

    </div>
  </div>
</div>

Componente Tarjetas de producto

Un componente de tarjetas de producto complejo y receptivo con un diseño corporativo/profesional que utiliza un esquema de color púrpura/violeta, adecuado para listados de productos de noticias o servicios profesionales. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="font-sans antialiased bg-purple-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 py-12 lg:py-20">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12 sm:mb-16 lg:mb-20">
      <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-purple-900 dark:text-purple-300 mb-4 sm:mb-6 leading-tight">
        Our Premium Offerings
      </h2>
      <p class="text-lg sm:text-xl text-purple-700 dark:text-purple-400 max-w-2xl mx-auto">
        Discover a curated selection of our most advanced and robust solutions designed to empower your business.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 xl:gap-12">

      <!-- Product Card 1 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-purple-100 dark:border-gray-700 flex flex-col">
        <a href="#" class="block relative group overflow-hidden">
          <img src="https://picsum.photos/600/400?random=1" alt="Advanced Analytics Platform" class="w-full h-56 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-t from-purple-800 to-transparent opacity-0 group-hover:opacity-75 transition-opacity duration-300 flex items-end p-4">
            <p class="text-white font-semibold text-lg">Explore Now</p>
          </div>
        </a>
        <div class="p-6 flex-grow flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-300 mb-3">
              <a href="#" class="hover:text-purple-700 dark:hover:text-purple-400 transition-colors duration-200">Advanced Analytics Platform</a>
            </h3>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
              Unleash deep insights with our cutting-edge AI-powered analytics, transforming raw data into actionable knowledge.
            </p>
          </div>
          <div class="mt-auto">
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-2 text-purple-600 dark:text-purple-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="M9.75 17L9.25 10m-3.25 7V10m6.5 7V10m2 7V10m-2 2a2 2 0 11-4 0 2 2 0 014 0zM12 2a10 10 0 100 20 10 10 0 000-20z" />
              </svg>
              <span class="font-medium text-purple-600 dark:text-purple-400">Data Science</span> &middot; <time datetime="2023-10-26">Oct 26, 2023</time>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Author Avatar" class="w-9 h-9 rounded-full object-cover mr-3 border-2 border-purple-300 dark:border-purple-600" loading="lazy">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-300">By John Doe</span>
              </div>
              <button class="px-5 py-2 bg-purple-600 text-white rounded-full font-semibold text-base hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 transition-colors duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
                Learn More
              </button>
            </div>
          </div>
        </div>
      </article>

      <!-- Product Card 2 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-purple-100 dark:border-gray-700 flex flex-col">
        <a href="#" class="block relative group overflow-hidden">
          <img src="https://picsum.photos/600/400?random=2" alt="Secure Cloud Solutions" class="w-full h-56 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-t from-purple-800 to-transparent opacity-0 group-hover:opacity-75 transition-opacity duration-300 flex items-end p-4">
            <p class="text-white font-semibold text-lg">Discover Security</p>
          </div>
        </a>
        <div class="p-6 flex-grow flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-300 mb-3">
              <a href="#" class="hover:text-purple-700 dark:hover:text-purple-400 transition-colors duration-200">Secure Cloud Infrastructure</a>
            </h3>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
              Fortify your digital assets with our robust, scalable, and highly secure cloud computing environments.
            </p>
          </div>
          <div class="mt-auto">
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-2 text-purple-600 dark:text-purple-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="M5 13l4 4L19 7" />
              </svg>
              <span class="font-medium text-purple-600 dark:text-purple-400">Cybersecurity</span> &middot; <time datetime="2023-10-25">Oct 25, 2023</time>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Author Avatar" class="w-9 h-9 rounded-full object-cover mr-3 border-2 border-purple-300 dark:border-purple-600" loading="lazy">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-300">By Jane Smith</span>
              </div>
              <button class="px-5 py-2 bg-purple-600 text-white rounded-full font-semibold text-base hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 transition-colors duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
                Learn More
              </button>
            </div>
          </div>
        </div>
      </article>

      <!-- Product Card 3 -->
      <article class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden border border-purple-100 dark:border-gray-700 flex flex-col">
        <a href="#" class="block relative group overflow-hidden">
          <img src="https://picsum.photos/600/400?random=3" alt="Enterprise AI Solutions" class="w-full h-56 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-t from-purple-800 to-transparent opacity-0 group-hover:opacity-75 transition-opacity duration-300 flex items-end p-4">
            <p class="text-white font-semibold text-lg">Get Started</p>
          </div>
        </a>
        <div class="p-6 flex-grow flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold text-purple-900 dark:text-purple-300 mb-3">
              <a href="#" class="hover:text-purple-700 dark:hover:text-purple-400 transition-colors duration-200">Enterprise AI Automation</a>
            </h3>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">
              Revolutionize workflows and boost efficiency with intelligent automation powered by our bespoke AI models.
            </p>
          </div>
          <div class="mt-auto">
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-2 text-purple-600 dark:text-purple-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="M9.663 17h4.673M12 9v6m-3-4h6m4 0a10 10 0 11-20 0 10 10 0 0120 0z" />
              </svg>
              <span class="font-medium text-purple-600 dark:text-purple-400">Artificial Intelligence</span> &middot; <time datetime="2023-10-24">Oct 24, 2023</time>
            </div>
            <div class="flex items-center justify-between">
              <div class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/29.jpg" alt="Author Avatar" class="w-9 h-9 rounded-full object-cover mr-3 border-2 border-purple-300 dark:border-purple-600" loading="lazy">
                <span class="text-sm font-medium text-gray-600 dark:text-gray-300">By David Lee</span>
              </div>
              <button class="px-5 py-2 bg-purple-600 text-white rounded-full font-semibold text-base hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 transition-colors duration-200 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75">
                Learn More
              </button>
            </div>
          </div>
        </div>
      </article>

    </div>
  </div>
</div>

Tarjetas de productos Art Deco Candy

Un componente de tarjetas de producto receptivo con un diseño inspirado en el Art Deco y una alegre combinación de colores dulces, adecuado para sistemas de reserva y reservas. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-8 bg-pink-50 dark:bg-gray-900 min-h-screen flex justify-center items-center font-serif">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl w-full">

    <!-- Product Card 1 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 group border-4 border-pink-300 dark:border-blue-700">
      <!-- Art Deco Top Border -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-pink-400 via-purple-300 to-blue-400 dark:from-purple-700 dark:via-blue-600 dark:to-cyan-500 clip-path-polygon-0-0-100-percent-0-90-percent-50-percent-100-percent-10-percent">
        <svg class="absolute top-0 right-0 h-full w-full" viewBox="0 0 100 4" preserveAspectRatio="none">
          <path d="M0 0 L100 0 L90 4 L10 4 Z" fill="currentColor" class="text-pink-400/20 dark:text-gray-700/20"/>
        </svg>
      </div>

      <div class="p-6 pt-10 relative z-10">
        <div class="w-16 h-16 bg-gradient-to-br from-pink-300 to-purple-300 dark:from-purple-600 dark:to-blue-600 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-white dark:border-gray-800 shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path d="M8 4a3 3 0 00-3 3v2H2a2 2 0 00-2 2v5a2 2 0 002 2h16a2 2 0 002-2v-5a2 2 0 00-2-2h-3V7a3 3 0 00-3-3H8zM5 7a1 1 0 011-1h8a1 1 0 011 1v2H5V7zm10 4H5v5h10v-5z" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-center text-pink-600 dark:text-pink-300 mb-2 tracking-wide">Sweet Serenity</h3>
        <p class="text-gray-700 dark:text-gray-300 text-center text-sm mb-4 font-sans italic">Your moment of tranquil bliss.</p>
        
        <div class="border-t border-b border-pink-200 dark:border-blue-800 py-3 mx-auto max-w-xs mb-4">
          <ul class="text-gray-600 dark:text-gray-400 text-center space-y-2 text-sm">
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-pink-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 60 Mins Session</li>
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-pink-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> Flexible Schedule</li>
          </ul>
        </div>

        <p class="text-4xl font-extrabold text-center text-mint-500 dark:text-cyan-400 mb-6">$120</p>

        <button class="w-full py-4 bg-gradient-to-r from-pink-500 to-purple-500 dark:from-purple-800 dark:to-blue-800 text-white font-bold rounded-lg shadow-lg hover:from-pink-600 hover:to-purple-600 dark:hover:from-purple-700 dark:hover:to-blue-700 transform transition duration-300 tracking-wider text-lg uppercase focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-pink-400 dark:focus:ring-blue-600">
          Book Now
        </button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 group border-4 border-mint-300 dark:border-purple-700">
      <!-- Art Deco Top Border -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-mint-400 via-blue-300 to-pink-400 dark:from-blue-700 dark:via-cyan-600 dark:to-purple-500 clip-path-polygon-0-0-100-percent-0-90-percent-50-percent-100-percent-10-percent">
         <svg class="absolute top-0 right-0 h-full w-full" viewBox="0 0 100 4" preserveAspectRatio="none">
          <path d="M0 0 L100 0 L90 4 L10 4 Z" fill="currentColor" class="text-mint-400/20 dark:text-gray-700/20"/>
        </svg>
      </div>
      <div class="p-6 pt-10 relative z-10">
        <div class="w-16 h-16 bg-gradient-to-br from-mint-300 to-blue-300 dark:from-blue-600 dark:to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-white dark:border-gray-800 shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M6.672 1.911a1.102 1.102 0 011.656 0L10 3.333l1.672-1.422a1.102 1.102 0 011.656 0L14.414 4H17a1 1 0 011 1v9a1 1 0 01-1 1h-3.414l-1.656 1.422a1.102 1.102 0 01-1.656 0L10 16.667l-1.672-1.422-1.656 1.422a1.102 1.102 0 01-1.656 0L2.586 15H1a1 1 0 01-1-1V5a1 1 0 011-1h2.586l1.672-1.422zM2 6v7h16V6H2zm8 3a3 3 0 100 6 3 3 0 000-6z" clip-rule="evenodd" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-center text-mint-600 dark:text-mint-300 mb-2 tracking-wide">Gleaming Glow</h3>
        <p class="text-gray-700 dark:text-gray-300 text-center text-sm mb-4 font-sans italic">Radiate from the inside out.</p>

        <div class="border-t border-b border-mint-200 dark:border-purple-800 py-3 mx-auto max-w-xs mb-4">
          <ul class="text-gray-600 dark:text-gray-400 text-center space-y-2 text-sm">
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-mint-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 90 Mins Treatment</li>
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-mint-500 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> Weekend Slots</li>
          </ul>
        </div>

        <p class="text-4xl font-extrabold text-center text-pink-500 dark:text-purple-400 mb-6">$180</p>

        <button class="w-full py-4 bg-gradient-to-r from-mint-500 to-blue-500 dark:from-blue-800 dark:to-purple-800 text-white font-bold rounded-lg shadow-lg hover:from-mint-600 hover:to-blue-600 dark:hover:from-blue-700 dark:hover:to-purple-700 transform transition duration-300 tracking-wider text-lg uppercase focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-mint-400 dark:focus:ring-purple-600">
          Reserve Spot
        </button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105 group border-4 border-blue-300 dark:border-cyan-700">
      <!-- Art Deco Top Border -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-blue-400 via-pink-300 to-mint-400 dark:from-cyan-700 dark:via-purple-600 dark:to-blue-500 clip-path-polygon-0-0-100-percent-0-90-percent-50-percent-100-percent-10-percent">
         <svg class="absolute top-0 right-0 h-full w-full" viewBox="0 0 100 4" preserveAspectRatio="none">
          <path d="M0 0 L100 0 L90 4 L10 4 Z" fill="currentColor" class="text-blue-400/20 dark:text-gray-700/20"/>
        </svg>
      </div>
      <div class="p-6 pt-10 relative z-10">
        <div class="w-16 h-16 bg-gradient-to-br from-blue-300 to-pink-300 dark:from-cyan-600 dark:to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4 border-2 border-white dark:border-gray-800 shadow-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10l2-2H4zm11.59 10.37L12 18.06V20h4v-1.94l-3.59-3.69z" clip-rule="evenodd" />
            <path fill-rule="evenodd" d="M8 10a2 2 0 11-4 0 2 2 0 014 0zm10.59 4.37L16 18.06V20h4v-1.94l-3.59-3.69zM12 10a2 2 0 11-4 0 2 2 0 014 0zm.59-4.37L16 2.06V0h4v1.94l-3.59 3.69z" clip-rule="evenodd" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold text-center text-blue-600 dark:text-blue-300 mb-2 tracking-wide">Jubilee Journey</h3>
        <p class="text-gray-700 dark:text-gray-300 text-center text-sm mb-4 font-sans italic">An unforgettable personal retreat.</p>

        <div class="border-t border-b border-blue-200 dark:border-cyan-800 py-3 mx-auto max-w-xs mb-4">
          <ul class="text-gray-600 dark:text-gray-400 text-center space-y-2 text-sm">
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-blue-500 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg> 120 Mins Deluxe</li>
            <li class="flex items-center justify-center"><svg class="h-4 w-4 mr-2 text-blue-500 dark:text-cyan-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> Priority Booking</li>
          </ul>
        </div>

        <p class="text-4xl font-extrabold text-center text-mint-500 dark:text-blue-400 mb-6">$250</p>

        <button class="w-full py-4 bg-gradient-to-r from-blue-500 to-cyan-500 dark:from-cyan-800 dark:to-purple-800 text-white font-bold rounded-lg shadow-lg hover:from-blue-600 hover:to-cyan-600 dark:hover:from-cyan-700 dark:hover:to-purple-700 transform transition duration-300 tracking-wider text-lg uppercase focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-cyan-600">
          Schedule Now
        </button>
      </div>
    </div>

  </div>
</div>

<style>
  /* This custom CSS is for the artistic border using clip-path, 
     as Tailwind currently does not support arbitrary clip-path values directly. */
  .clip-path-polygon-0-0-100-percent-0-90-percent-50-percent-100-percent-10-percent {
    clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
  }
</style>

Componente de tarjetas de productos neumórficas - Paleta retro

Un componente de tarjetas de producto complejo y receptivo diseñado con un estilo de interfaz de usuario neumórfico suave, que utiliza una paleta de colores retro/vintage apagados. Las características incluyen soporte para modo oscuro, sombras sutiles para el efecto de extrusión y HTML semántico para la accesibilidad. Adecuado para la lectura y el consumo de contenido, como un blog o la visualización de contenido.

Abrir Vista previa

                <div class="p-4 sm:p-8 md:p-12 bg-lime-100 dark:bg-gray-800 min-h-screen font-sans antialiased transition-colors duration-300">

  <!-- Component Title -->
  <h2 class="text-3xl sm:text-4xl md:text-5xl font-bold text-lime-900 dark:text-gray-100 mb-8 text-center drop-shadow-sm">
    Featured Blog Posts
  </h2>

  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 md:gap-10">

    <!-- Product Card 1 -->
    <div class="
        group relative p-6 sm:p-8 rounded-2xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl
        bg-lime-200 dark:bg-gray-700 transition-all duration-300
        hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
        flex flex-col
      ">
      <!-- Card Image -->
      <div class="w-full h-48 sm:h-56 md:h-64 mb-6 rounded-xl overflow-hidden shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img src="https://picsum.photos/id/684/600/400" alt="Abstract art" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
      </div>

      <!-- Card Content -->
      <div class="flex-grow">
        <h3 class="text-xl sm:text-2xl font-bold text-lime-700 dark:text-gray-200 mb-3 leading-tight">
          The Art of Slow Living: Embracing Mindfulness
        </h3>
        <p class="text-sm sm:text-base text-teal-800 dark:text-gray-300 line-clamp-3 mb-4">
          Discover how to cultivate a more peaceful and intentional life by incorporating mindful practices into your daily routine. From simple breathing exercises to creating a serene home environment, this post explores practical tips for embracing the slow living movement...
        </p>
      </div>

      <!-- Card Footer -->
      <div class="mt-auto flex items-end justify-between pt-4">
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <div>
            <p class="text-xs font-semibold text-lime-800 dark:text-gray-200">Jane Doe</p>
            <p class="text-xs text-teal-700 dark:text-gray-400">Oct 26, 2023</p>
          </div>
        </div>
        <a href="#" class="
            inline-flex items-center px-4 py-2 rounded-lg
            bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
            group-hover:translate-y-0.5 group-hover:scale-[0.98]
          ">
          Read More
          <svg class="ml-2 w-4 h-4" 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>
        </a>
      </div>

      <!-- Hidden details for complex interaction - example only -->
      <div class="absolute inset-0 rounded-2xl bg-lime-100/90 dark:bg-gray-800/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto">
        <button class="
          p-3 rounded-full bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
        ">
          <svg class="w-6 h-6" 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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
        </button>
      </div>

    </div>

    <!-- Product Card 2 -->
    <div class="
        group relative p-6 sm:p-8 rounded-2xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl
        bg-lime-200 dark:bg-gray-700 transition-all duration-300
        hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
        flex flex-col
      ">
      <!-- Card Image -->
      <div class="w-full h-48 sm:h-56 md:h-64 mb-6 rounded-xl overflow-hidden shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img src="https://picsum.photos/id/1025/600/400" alt="Mountain landscape" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
      </div>

      <!-- Card Content -->
      <div class="flex-grow">
        <h3 class="text-xl sm:text-2xl font-bold text-lime-700 dark:text-gray-200 mb-3 leading-tight">
          Exploring Vintage Photography Techniques
        </h3>
        <p class="text-sm sm:text-base text-teal-800 dark:text-gray-300 line-clamp-3 mb-4">
          Dive into the fascinating world of analogue photography. This post covers classic techniques, from experimenting with film cameras to developing your own prints, and tips to capture that timeless, retro feel...
        </p>
      </div>

      <!-- Card Footer -->
      <div class="mt-auto flex items-end justify-between pt-4">
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/men/76.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <div>
            <p class="text-xs font-semibold text-lime-800 dark:text-gray-200">John Smith</p>
            <p class="text-xs text-teal-700 dark:text-gray-400">Oct 19, 2023</p>
          </div>
        </div>
        <a href="#" class="
            inline-flex items-center px-4 py-2 rounded-lg
            bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
            group-hover:translate-y-0.5 group-hover:scale-[0.98]
          ">
          Read More
          <svg class="ml-2 w-4 h-4" 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>
        </a>
      </div>

      <!-- Hidden details for complex interaction - example only -->
      <div class="absolute inset-0 rounded-2xl bg-lime-100/90 dark:bg-gray-800/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto">
        <button class="
          p-3 rounded-full bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
        ">
          <svg class="w-6 h-6" 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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
        </button>
      </div>

    </div>

    <!-- Product Card 3 -->
    <div class="
        group relative p-6 sm:p-8 rounded-2xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl
        bg-lime-200 dark:bg-gray-700 transition-all duration-300
        hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
        flex flex-col
      ">
      <!-- Card Image -->
      <div class="w-full h-48 sm:h-56 md:h-64 mb-6 rounded-xl overflow-hidden shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
        <img src="https://picsum.photos/id/40/600/400" alt="Coffee and notes" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105">
      </div>

      <!-- Card Content -->
      <div class="flex-grow">
        <h3 class="text-xl sm:text-2xl font-bold text-lime-700 dark:text-gray-200 mb-3 leading-tight">
          Retro Gaming Revival: A Look Back at Classics
        </h3>
        <p class="text-sm sm:text-base text-teal-800 dark:text-gray-300 line-clamp-3 mb-4">
          Join us on a nostalgic journey through the golden age of video games. From pixelated wonders to iconic consoles, we revisit the titles that defined a generation and explore their lasting impact...
        </p>
      </div>

      <!-- Card Footer -->
      <div class="mt-auto flex items-end justify-between pt-4">
        <div class="flex items-center space-x-3">
          <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark">
          <div>
            <p class="text-xs font-semibold text-lime-800 dark:text-gray-200">Alice Brown</p>
            <p class="text-xs text-teal-700 dark:text-gray-400">Oct 12, 2023</p>
          </div>
        </div>
        <a href="#" class="
            inline-flex items-center px-4 py-2 rounded-lg
            bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
            group-hover:translate-y-0.5 group-hover:scale-[0.98]
          ">
          Read More
          <svg class="ml-2 w-4 h-4" 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>
        </a>
      </div>

      <!-- Hidden details for complex interaction - example only -->
      <div class="absolute inset-0 rounded-2xl bg-lime-100/90 dark:bg-gray-800/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto">
        <button class="
          p-3 rounded-full bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
        ">
          <svg class="w-6 h-6" 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="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
        </button>
      </div>

    </div>

  </div>

  <!-- Tailwind CSS Customizations (typically in tailwind.config.js) -->
  <style>
    .shadow-neumorphic-light-xl {
      box-shadow: 10px 10px 20px #97ac88, -10px -10px 20px #d5ffb8;
    }
    .dark .shadow-neumorphic-dark-xl {
      box-shadow: 10px 10px 20px #4e4e4e, -10px -10px 20px #828282;
    }

    .shadow-neumorphic-light-pressed {
      box-shadow: inset 5px 5px 10px #97ac88, inset -5px -5px 10px #d5ffb8;
    }
    .dark .shadow-neumorphic-dark-pressed {
      box-shadow: inset 5px 5px 10px #4e4e4e, inset -5px -5px 10px #828282;
    }

    .shadow-neumorphic-inset-light {
      box-shadow: inset 5px 5px 10px #97ac88, inset -5px -5px 10px #d5ffb8;
    }
    .dark .shadow-neumorphic-inset-dark {
      box-shadow: inset 5px 5px 10px #4e4e4e, inset -5px -5px 10px #828282;
    }
    
    /* Smaller, general neumorphic shadow for avatars, buttons */
    .shadow-neumorphic-light {
        box-shadow: 3px 3px 6px #97ac88, -3px -3px 6px #d5ffb8;
    }
    .dark .shadow-neumorphic-dark {
        box-shadow: 3px 3px 6px #4e4e4e, -3px -3px 6px #828282;
    }

    /* Retro palette colors as reference: */
    /* Light Mode: */
    /* Background: --lime-100 (#ebf8dc) */
    /* Card BG: --lime-200 (#dceeb7) */
    /* Primary Text/Icons: --lime-700 (#6f8f4a), --lime-800 (#4a6a25), --lime-900 (#3d591c) */
    /* Secondary Text: --teal-700 (#4a7a7a), --teal-800 (#2a5a5a) */
    /* Button/Interactive: --lime-300 (#c8e49e) */

    /* Dark Mode: */
    /* Background: --gray-800 (#2d3748) */
    /* Card BG: --gray-700 (#4a5568) */
    /* Primary Text/Icons: --gray-100 (#f7fafc), --gray-200 (#edf2f7) */
    /* Secondary Text: --gray-300 (#e2e8f0), --gray-400 (#cbd5e0) */
    /* Button/Interactive: --gray-600 (#718096) */

    /* Note: For a real project, these custom shadows would be configured in `tailwind.config.js` 
       under the `theme.extend.boxShadow` property for reusability. 
       This inline style is for demonstration purposes within a single file. */
  </style>
</div>

Componente de tarjetas de producto skeuomórficas

Componente de tarjetas de producto simple y receptivo con un diseño esqueuomórfico en escala de grises, adecuado para sitios web comerciales / corporativos. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
  <div class="max-w-6xl mx-auto py-8">
    <h2 class="text-3xl sm:text-4xl font-extrabold mb-8 text-center text-gray-900 dark:text-white tracking-tight leading-tight">
      Our Featured Products
    </h2>
    <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

      <!-- Product Card 1 -->
      <div class="relative p-px rounded-3xl group bg-gradient-to-br from-gray-300 via-gray-200 to-gray-300 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-xl dark:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:shadow-2xl dark:hover:shadow-3xl">
        <div class="relative h-full w-full rounded-[1.45rem] overflow-hidden bg-gray-100 dark:bg-gray-850 p-4 transition-all duration-300">
          <img class="w-full h-40 object-cover rounded-xl mb-4 shadow-inner-sm border border-gray-200 dark:border-gray-700" src="https://picsum.photos/id/1015/300/200" alt="Product Image 1">
          <div class="p-2">
            <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-white capitalize leading-tight">
              Advanced Gadget Pro
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
              Immerse yourself in unparalleled performance with our latest innovation. Designed for the future. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            </p>
            <div class="flex items-center justify-between mt-4">
              <span class="text-xl font-extrabold text-gray-900 dark:text-white">$299.99</span>
              <button class="relative px-5 py-2 rounded-lg text-sm font-semibold text-gray-800 dark:text-gray-100 bg-gradient-to-br from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-neu dark:shadow-neu-dark border border-gray-300 dark:border-gray-600 transition-all duration-200 ease-in-out active:scale-95 active:shadow-inner-neu dark:active:shadow-inner-neu-dark">
                Buy Now
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="relative p-px rounded-3xl group bg-gradient-to-br from-gray-300 via-gray-200 to-gray-300 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-xl dark:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:shadow-2xl dark:hover:shadow-3xl">
        <div class="relative h-full w-full rounded-[1.45rem] overflow-hidden bg-gray-100 dark:bg-gray-850 p-4 transition-all duration-300">
          <img class="w-full h-40 object-cover rounded-xl mb-4 shadow-inner-sm border border-gray-200 dark:border-gray-700" src="https://picsum.photos/id/1016/300/200" alt="Product Image 2">
          <div class="p-2">
            <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-white capitalize leading-tight">
              Elite Sound System
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
              Experience crystal-clear audio with our state-of-the-art sound system. Perfect for audiophiles. Consectetur adipiscing elit. Faucibus amet.
            </p>
            <div class="flex items-center justify-between mt-4">
              <span class="text-xl font-extrabold text-gray-900 dark:text-white">$499.50</span>
              <button class="relative px-5 py-2 rounded-lg text-sm font-semibold text-gray-800 dark:text-gray-100 bg-gradient-to-br from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-neu dark:shadow-neu-dark border border-gray-300 dark:border-gray-600 transition-all duration-200 ease-in-out active:scale-95 active:shadow-inner-neu dark:active:shadow-inner-neu-dark">
                Buy Now
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="relative p-px rounded-3xl group bg-gradient-to-br from-gray-300 via-gray-200 to-gray-300 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-xl dark:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:shadow-2xl dark:hover:shadow-3xl">
        <div class="relative h-full w-full rounded-[1.45rem] overflow-hidden bg-gray-100 dark:bg-gray-850 p-4 transition-all duration-300">
          <img class="w-full h-40 object-cover rounded-xl mb-4 shadow-inner-sm border border-gray-200 dark:border-gray-700" src="https://picsum.photos/id/1018/300/200" alt="Product Image 3">
          <div class="p-2">
            <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-white capitalize leading-tight">
              Smart Home Hub
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
              Control your home with ease using our intuitive smart hub. Integration made simple. Dolor sit amet, consectetur adipiscing elit. 
            </p>
            <div class="flex items-center justify-between mt-4">
              <span class="text-xl font-extrabold text-gray-900 dark:text-white">$175.00</span>
              <button class="relative px-5 py-2 rounded-lg text-sm font-semibold text-gray-800 dark:text-gray-100 bg-gradient-to-br from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-neu dark:shadow-neu-dark border border-gray-300 dark:border-gray-600 transition-all duration-200 ease-in-out active:scale-95 active:shadow-inner-neu dark:active:shadow-inner-neu-dark">
                Buy Now
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="relative p-px rounded-3xl group bg-gradient-to-br from-gray-300 via-gray-200 to-gray-300 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-xl dark:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 hover:shadow-2xl dark:hover:shadow-3xl">
        <div class="relative h-full w-full rounded-[1.45rem] overflow-hidden bg-gray-100 dark:bg-gray-850 p-4 transition-all duration-300">
          <img class="w-full h-40 object-cover rounded-xl mb-4 shadow-inner-sm border border-gray-200 dark:border-gray-700" src="https://picsum.photos/id/1/300/200" alt="Product Image 4">
          <div class="p-2">
            <h3 class="text-lg font-bold mb-2 text-gray-900 dark:text-white capitalize leading-tight">
              Portable Power Bank
            </h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
              Never run out of power on the go with our high-capacity power bank. Reliability in your pocket. Lorem ipsum dolor sit amet.
            </p>
            <div class="flex items-center justify-between mt-4">
              <span class="text-xl font-extrabold text-gray-900 dark:text-white">$49.99</span>
              <button class="relative px-5 py-2 rounded-lg text-sm font-semibold text-gray-800 dark:text-gray-100 bg-gradient-to-br from-gray-200 via-gray-100 to-gray-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 shadow-neu dark:shadow-neu-dark border border-gray-300 dark:border-gray-600 transition-all duration-200 ease-in-out active:scale-95 active:shadow-inner-neu dark:active:shadow-inner-neu-dark">
                Buy Now
              </button>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Custom styles for skeuomorphic shadows might require a simple Tailwind config extension -->
  <style>
    .shadow-neu {
      box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neu-dark {
      box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #282828;
    }
    .active\:shadow-inner-neu {
      box-shadow: inset 2px 2px 5px #bebebe, inset -2px -2px 5px #ffffff;
    }
    .dark .active\:shadow-inner-neu-dark {
      box-shadow: inset 2px 2px 5px #1c1c1c, inset -2px -2px 5px #282828;
    }
    .shadow-inner-sm {
      box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1), inset -1px -1px 2px rgba(255,255,255,0.7);
    }
  </style>
  <!-- Note: For production, consider extending theme.boxShadow in tailwind.config.js for these custom shadows. -->
</div>

Componente Tarjetas de producto

Fichas de producto Componente para redes sociales con un esquema de color triádico oscuro y complejidad moderada. Utiliza Tailwind CSS para un diseño responsivo con soporte para modo oscuro, e incluye marcadores de posición para imágenes y avatares.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center p-4">
  <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-8">Social Media Product Cards</h1>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Cool Gadget Pro</h3>
          <span class="text-lg font-bold text-teal-500 dark:text-teal-400">$299</span>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Elevate your digital experience with this cutting-edge gadget, featuring advanced capabilities.</p>
        <div class="flex items-center mb-4">
          <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <span class="text-gray-700 dark:text-gray-300 text-sm">By John Doe</span>
        </div>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
          <span>❤️ 1.2K Likes</span>
          <span>💬 245 Comments</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Smartwatch Elegance</h3>
          <span class="text-lg font-bold text-rose-500 dark:text-rose-400">$179</span>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Stay connected and stylish with this elegant smartwatch, designed for modern living.</p>
        <div class="flex items-center mb-4">
          <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <span class="text-gray-700 dark:text-gray-300 text-sm">By Jane Smith</span>
        </div>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
          <span>❤️ 980 Likes</span>
          <span>💬 180 Comments</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform transition duration-300 hover:scale-105">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
      <div class="p-6">
        <div class="flex justify-between items-center mb-4">
          <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Wireless Headphones</h3>
          <span class="text-lg font-bold text-amber-500 dark:text-amber-400">$120</span>
        </div>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Immerse yourself in rich audio with these comfortable and high-fidelity wireless headphones.</p>
        <div class="flex items-center mb-4">
          <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
          <span class="text-gray-700 dark:text-gray-300 text-sm">By Peter Jones</span>
        </div>
        <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
          <span>❤️ 1.5K Likes</span>
          <span>💬 300 Comments</span>
        </div>
        <button class="mt-4 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md transition duration-300">View Details</button>
      </div>
    </div>
  </div>
</div>

Componente Tarjetas de producto

Un componente de tarjeta de producto responsivo con un estilo de diseño Skeuomorphism, una combinación de colores en tonos tierra e interacciones complejas, adecuado para una cartera. Incluye soporte para temas oscuros y utiliza Tailwind CSS para el estilo. Las imágenes provienen de picsum.photos y los avatares de randomuser.me.

Abrir Vista previa

                <div class="bg-stone-100  dark:bg-stone-900 min-h-screen p-8 flex flex-wrap items-center justify-center font-sans">

  <!-- Product Card 1 -->
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">
    <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
      <div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
      <div class="relative z-10">
        <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
        <h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Earthen Vessel</h2>
        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">Hand-crafted ceramic vessel, ideal for home decor or as a unique gift. Each piece is organically formed and fired to perfection.</p>
        
        <div class="flex items-center justify-center mb-6">
          <div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.9</span>
            <span class="text-stone-600 dark:text-stone-400 text-md">(128 Reviews)</span>
          </div>
        </div>

        <div class="flex justify-around items-center mb-6">
          <div class="text-stone-800 dark:text-stone-100">
            <span class="block text-sm opacity-80">Dimensions:</span>
            <span class="text-lg font-bold">15x10 cm</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Weight:</span>
            <span class="text-lg font-bold">0.8 kg</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Material:</span>
            <span class="text-lg font-bold">Clay</span>
          </div>
        </div>

        <div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
          <div class="flex items-center -space-x-3">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/47.jpg" alt="Customer Avatar">
            <span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+25 Happy customers</span>
          </div>
          <span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$79.00</span>
        </div>
        
        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
            Add to Cart
          </button>
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700">
            View Details
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Product Card 2 -->
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">
    <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
      <div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
      <div class="relative z-10">
        <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
        <h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Rustic Planter</h2>
        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">A robust planter crafted from recycled oak barrels, perfect for adding a touch of nature indoors or out.</p>
        
        <div class="flex items-center justify-center mb-6">
          <div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.7</span>
            <span class="text-stone-600 dark:text-stone-400 text-md">(95 Reviews)</span>
          </div>
        </div>

        <div class="flex justify-around items-center mb-6">
          <div class="text-stone-800 dark:text-stone-100">
            <span class="block text-sm opacity-80">Dimensions:</span>
            <span class="text-lg font-bold">50x40 cm</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Weight:</span>
            <span class="text-lg font-bold">5.2 kg</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Material:</span>
            <span class="text-lg font-bold">Oak Wood</span>
          </div>
        </div>

        <div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
          <div class="flex items-center -space-x-3">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/55.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/62.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar">
            <span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+18 Happy customers</span>
          </div>
          <span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$120.00</span>
        </div>
        
        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
            Add to Cart
          </button>
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700 ">
            View Details
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Product Card 3 -->
  <div class="w-full md:w-1/2 lg:w-1/3 p-4">
    <div class="bg-gradient-to-br from-stone-300 to-stone-400 dark:from-stone-700 dark:to-stone-800 rounded-3xl shadow-2xl p-8 transform transition-transform duration-500 hover:scale-105 hover:shadow-stone-500/50 dark:hover:shadow-stone-900/50 border-t border-l border-stone-200 dark:border-stone-700 relative overflow-hidden">
      <div class="absolute inset-0 bg-pattern-texture opacity-10 pointer-events-none"></div>
      <div class="relative z-10">
        <img src="https://picsum.photos/400/300?random=3" alt="Product Image" class="rounded-2xl mb-6 shadow-xl border border-stone-500">
        <h2 class="text-3xl font-extrabold text-stone-800 dark:text-stone-100 mb-3 text-center tracking-wide">Terra Cotta Mug</h2>
        <p class="text-stone-700 dark:text-stone-300 leading-relaxed mb-6 text-center">A charming terra cotta mug, perfect for your morning coffee or evening tea. Hand-painted with natural dyes.</p>
        
        <div class="flex items-center justify-center mb-6">
          <div class="flex items-center space-x-2 text-yellow-600 dark:text-yellow-400">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span class="text-stone-800 dark:text-stone-200 text-lg font-semibold">4.6</span>
            <span class="text-stone-600 dark:text-stone-400 text-md">(72 Reviews)</span>
          </div>
        </div>

        <div class="flex justify-around items-center mb-6">
          <div class="text-stone-800 dark:text-stone-100">
            <span class="block text-sm opacity-80">Dimensions:</span>
            <span class="text-lg font-bold">10x8 cm</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Weight:</span>
            <span class="text-lg font-bold">0.3 kg</span>
          </div>
          <div class="text-stone-800 dark:text-stone-100 text-center">
            <span class="block text-sm opacity-80">Material:</span>
            <span class="text-lg font-bold">Terra Cotta</span>
          </div>
        </div>

        <div class="flex items-center justify-between mb-8 pb-4 border-b border-stone-400/50 dark:border-stone-600/50">
          <div class="flex items-center -space-x-3">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/women/81.jpg" alt="Customer Avatar">
            <img class="w-12 h-12 rounded-full border-4 border-stone-300 dark:border-stone-700 shadow-md transform hover:scale-110 transition-transform" src="https://randomuser.me/api/portraits/men/84.jpg" alt="Customer Avatar">
            <span class="text-stone-700 dark:text-stone-300 text-sm pl-2">+10 Happy customers</span>
          </div>
          <span class="text-4xl font-extrabold text-stone-900 dark:text-stone-50">$25.00</span>
        </div>
        
        <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-lg shadow-green-700/40 dark:shadow-green-600/40 transform active:scale-95 transition-all duration-200 border-b-2 border-green-900 dark:border-green-800">
            Add to Cart
          </button>
          <button class="px-8 py-4 rounded-xl text-lg font-bold text-stone-800 dark:text-stone-200 bg-stone-200 hover:bg-stone-300 dark:bg-stone-600 dark:hover:bg-stone-500 shadow-lg shadow-stone-400/40 dark:shadow-stone-800/40 transform active:scale-95 transition-all duration-200 border-b-2 border-stone-400 dark:border-stone-700">
            View Details
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- You might need to add this to your tailwind.config.js for the texture pattern -->
   <style>
    .bg-pattern-texture {
      background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.1'%3E%3Cpath fill-rule='evenodd' d='M0 0h10v10H0V0zm10 0h10v10H10V0zM0 10h10v10H0V10zm10 10h10v-10H10v10z'/%3E%3C/g%3E%3C/svg%3E");
    }

    .dark .bg-pattern-texture {
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath fill-rule='evenodd' d='M0 0h10v10H0V0zm10 0h10v10H10V0zM0 10h10v10H0V10zm10 10h10v-10H10v10z'/%3E%3C/g%3E%3C/svg%3E");
    }
  </style>

</div>