Todos los componentes

Explorar todos los componentes CSS de Tailwind disponibles

Componente Perfiles de usuario

Un componente de perfil de usuario complejo, inspirado en 3D, diseñado para sistemas de reservas, con neutros fríos, capacidad de respuesta y compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 p-4 sm:p-6 lg:p-8 dark:bg-gray-900 transition-colors duration-300">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
    <!-- Profile Card 1 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">Jane Doe</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Senior Stylist</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Highly experienced stylist specializing in modern cuts and vibrant color treatments.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>5 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Certified</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <!-- 3D effect layers -->
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

    <!-- Profile Card 2 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">John Smith</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Master Barber</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Dedicated master barber with a keen eye for classic and contemporary men's grooming.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>8 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Awarded</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

    <!-- Profile Card 3 -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 perspective-1000 group dark:shadow-gray-700/50">
      <div class="p-6 sm:p-8 relative z-10">
        <div class="flex flex-col items-center text-center">
          <div class="relative w-24 h-24 mb-4 rounded-full overflow-hidden border-4 border-blue-300 dark:border-blue-600 shadow-lg">
            <img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Profile image">
            <div class="absolute inset-0 bg-gradient-to-tr from-blue-400/20 to-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          </div>
          <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-1">Emily White</h3>
          <p class="text-blue-600 dark:text-blue-400 font-semibold mb-4">Esthetician</p>
          <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed mb-6">Expert esthetician, passionate about skincare and providing rejuvenating facial treatments.</p>
        </div>

        <div class="grid grid-cols-2 gap-4 mb-6">
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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 3.686l-5.657 5.657m11.314 0L12 10.343l-5.657-5.657m0 0L5.636 5.636m12.728 0c-.78-.78-2.047-.78-2.828 0L12 7.172l-2.121-2.121c-.78-.78-2.047-.78-2.828 0L5.636 5.636m0 0L7.05 7.05m9.9 0L10.343 12 7.05 7.05M7.05 7.05l-1.414 1.414m12.728 0l1.414-1.414M12 12a4 4 0 110-8 4 4 0 010 8z"></path></svg>
            <span>3 Years Exp.</span>
          </div>
          <div class="flex items-center space-x-2 text-gray-700 dark:text-gray-300">
            <svg class="w-5 h-5 text-blue-500" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
            <span>Licensed</span>
          </div>
        </div>

        <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg text-center transition-all duration-300 transform group-hover:scale-105 active:scale-95 shadow-md hover:shadow-lg dark:bg-blue-500 dark:hover:bg-blue-600">
          Book Appointment
        </a>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-blue-100 via-white to-blue-200 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-20px);"></div>
      <div class="absolute inset-0 bg-blue-50 dark:bg-gray-700 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-xl" style="transform: translateZ(-40px);"></div>
    </div>

  </div>
</div>

360_viewer_component_sports_grayscale

Un componente de visor de 360° simple y receptivo para aplicaciones deportivas / fitness, con un estilo artístico / acuarela con un esquema de color en escala de grises y compatibilidad con modo oscuro.

Abrir Vista previa

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-50 to-gray-200 dark:from-gray-900 dark:to-gray-800 font-sans min-h-screen flex items-center justify-center">
  <div class="relative w-full max-w-4xl bg-white dark:bg-gray-700 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-600 transform transition-all duration-300 hover:scale-105 p-6 sm:p-8 md:p-10">
    <!-- Artistic Overlay Elements -->
    <div class="absolute inset-0 pointer-events-none opacity-20 dark:opacity-10">
      <div class="absolute top-0 left-0 w-2/3 h-2/3 bg-gray-400 dark:bg-gray-500 rounded-full mix-blend-multiply filter blur-3xl opacity-30 transform -translate-x-1/4 -translate-y-1/4"></div>
      <div class="absolute bottom-0 right-0 w-1/2 h-1/2 bg-gray-300 dark:bg-gray-600 rounded-full mix-blend-multiply filter blur-3xl opacity-30 transform translate-x-1/4 translate-y-1/4"></div>
    </div>

    <div class="relative z-10 text-center">
      <h2 class="text-2xl sm:text-3xl md:text-4xl font-bold mb-4 text-gray-800 dark:text-gray-100 leading-tight">
        <span class="block">Athlete 360° View</span>
        <span class="block text-base sm:text-lg font-medium text-gray-600 dark:text-gray-300">Deep Dive into Performance</span>
      </h2>
      <p class="mb-8 text-gray-600 dark:text-gray-300 text-sm sm:text-base max-w-2xl mx-auto">
        Explore every angle of their technique and form. Pinch, drag, and zoom for an immersive experience.
      </p>

      <div class="relative w-full aspect-video bg-gray-100 dark:bg-gray-800 rounded-md overflow-hidden shadow-inner border border-gray-300 dark:border-gray-600 mb-6 group">
        <img src="https://picsum.photos/800/450?random=1" alt="360 view placeholder" class="w-full h-full object-cover transition-opacity duration-500 group-hover:opacity-80">
        <div class="absolute inset-0 flex items-center justify-center">
          <div class="bg-white dark:bg-gray-900 bg-opacity-80 dark:bg-opacity-80 p-4 rounded-full shadow-lg border border-gray-200 dark:border-gray-700 backdrop-blur-sm">
            <svg class="h-10 w-10 text-gray-700 dark:text-gray-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
              <path fill="none" d="M0 0h24v24H0z"/>
            </svg>
          </div>
        </div>
      </div>

      <div class="flex flex-wrap justify-center gap-4 text-sm">
        <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-400 dark:border-gray-600 rounded-full shadow-sm text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 6h2v8h-2zm0 10h2v2h-2z"/>
          </svg>
          More Details
        </a>
        <a href="#" class="inline-flex items-center px-6 py-3 border border-gray-400 dark:border-gray-600 rounded-full shadow-sm text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-all duration-200 ease-in-out transform hover:-translate-y-0.5 hover:shadow-md">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
          </svg>
          View Analysis
        </a>
      </div>
    </div>
  </div>
</div>

Componente de botones para compartir en redes sociales

Un componente de botón de compartir en redes sociales receptivo para sitios web de comida/restaurantes, con un degradado de arco iris, microinteracciones al pasar el cursor y soporte completo para el modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center p-4 min-h-screen bg-gray-50 dark:bg-gray-900 font-sans">
  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 max-w-sm w-full transition-all duration-300 ease-in-out transform hover:scale-105">
    <h2 class="text-2xl font-extrabold text-center mb-6 text-transparent bg-clip-text bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 dark:from-red-400 dark:via-yellow-400 dark:to-green-400">
      Share This Delicious Food!
    </h2>
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
      <!-- Facebook Button -->
      <a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-blue-600 to-blue-800 text-white
                  dark:from-blue-700 dark:to-blue-900">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M17 2H7a5 5 0 00-5 5v10a5 5 0 005 5h10a5 5 0 005-5V7a5 5 0 00-5-5zm-1.8 7.2h-2.1v-1.7c0-.5.2-.8.8-.8h1.3V6.2h-2.1c-2.4 0-3 1.8-3 3v2.2H8.9v2.8h1.6V20h3.2v-5.8h1.6l.3-2.8h-1.9v-2c0-.7.3-1.1 1.2-1.1z" />
        </svg>
        <span class="sr-only">Share on Facebook</span>
      </a>

      <!-- Twitter Button -->
      <a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-sky-400 to-cyan-600 text-white
                  dark:from-sky-500 dark:to-cyan-700">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M18.24 3.7 C17.38 4.6 15.65 5.56 12.87 5.7 C11.3 4 9.17 3 6.78 3 c-3.57 0-6.49 2.92-6.49 6.5 S3.21 16 6.78 16 c1.79 0 3.44-.68 4.7-1.85 l.3 2.15 h-3.23 C5.06 16.3 3.6 17.76 3.6 19.5 s1.46 3.2 3.2 3.2 H14.6 c1.74 0 3.2-1.46 3.2-3.2 0-1.74-1.46-3.2-3.2-3.2 H11.4 L11 11.5 h5.2 c.72 0 1.28-.56 1.28-1.28 V8.4 c0-.72-.56-1.28-1.28-1.28 h-5.8 l-.5-1.95 C12.28 4.4 13.9 3.5 15.9 3.5 c1.18 0 2.27.35 3.16.94 L18.24 3.7 M6.78 5.7 c.73 0 1.4.16 2 .46 -.6-.26-1.28-.4-1.98-.4 c-3.13 0-5.69 2.56-5.69 5.7 S3.65 17 6.78 17 c1.36 0 2.6-.48 3.56-1.25 L9.6 14.8 c-.8 0-1.5-.16-2.1-.46 C6.7 14 6.2 13.7 5.8 13.2 l-.35-.35 c-.46-.46-1.07-.7-1.72-.7 -1.25 0-2.28 1.03-2.28 2.28 s1.03 2.28 2.28 2.28 c.83 0 1.58-.45 1.95-1.12 C6.2 15.9 6.5 15.6 6.78 15.6 L6.78 5.7 z" />
        </svg>
        <span class="sr-only">Share on Twitter</span>
      </a>

      <!-- WhatsApp Button -->
      <a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-green-500 to-teal-500 text-white
                  dark:from-green-600 dark:to-teal-600">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.04 2.2 C6.55 2.2 2.17 6.6 2.17 12.1 c0 1.7.45 3.3.13 4.1 L2 21.8 l5.1-.9 c.7.3 1.4.4 2.2.4 L12.04 22 c5.49 0 9.87-4.4 9.87-9.9 C21.91 6.6 17.53 2.2 12.04 2.2 M17 15.1 c-.2.1-.4.2-.6.2-.2 0-.4-.1-.5-.1-.2-.1-.5-.2-.7-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3s-.3-.2-.5-.3-.2-.1-.4-.2-.2-.1-.4-.2-.1-.1-.3-.2-.1-.1-.3-.1-.1-.1-.2-.1-.1-.1-.2-.1s-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1 0-.1 0-.1 0 0 0c-.1 0-.1 0 0 0-.1 0-.1 0 0 0h-.1s0-.1 0-.1c0-.1 0-.1 0-.1c-.1 0-.1 0-.1-.1s-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1c-.1-.1-.1-.1-.2-.1l-.1-.1c-.1-.1-.1-.1-.2-.1l-.1-.1c-.1 0-.1-.1-.2-.1s-.1-.1-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1-.1-.1-.1-.2-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1 0c-.1 0-.1 0-.1 0l-.1 0c-.1 0-.1 0-.1 0l-.1 0c-.1 0-.1 0-.1 0l-.1-.1c-.1 0-.1 0-.1 0l-.1-.1c-.1 0-.1 0-.1-.1l-.1-.1c-.1 0-.1 0-.1-.1l-.1 0c-.1 0-.1 0-.1-.1l-.1-.1C4.4 17.5 4 15.8 4 14.1c0-2.8.9-5.1 2.3-6.9 1.4-1.8 3.3-2.8 5.4-2.8S15.1 5.4 16.5 7.2c1.4 1.8 2.3 4.1 2.3 6.9 0 2.8-.9 5.1-2.3 6.9-1.4 1.8-3.3 2.8-5.4 2.8-2.1 0-4.1-.9-5.4-2.8l-.1-.1-.1-.1-.2-.1-.2-.1-.2-.1-.2-.1-.2-.1.2-.2.2-.2c-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3-.2-.1-.4-.2-.5-.3s-.3-.2-.5-.3-.2-.1-.4-.2-.2-.1-.4-.2-.2-.1-.4-.2-.1-.1-.3-.1-.1-.1-.3-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1s-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1-.1-.2-.1-.1 0-.1 0-.1 0-.1-.1c-.1 0-.1 0-.1-.1-.1 0-.1 0-.1 0-.1 0-.1-.1-.2-.1-.1 0-.1 0-.1 0-.1 0-.1 0-.1-.1-.1 0-.1 0-.1 0-.1 0-.1 0-.1-.1-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0-.1 0V11.2c0-.5.2-.8.5-.8h.1c.3.1.5.3.6.5.1.2.2.3.4.5.1.2.3.4.4.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5.2.2.4.4.6.5h.1c-.2-.1-.5-.2-.7-.3-.2-.1-.5-.2-.7-.3-.2-.1-.5-.2-.7-.3-.2-.1-.5-.2-.7-.3l-3.2-1.9c-.3-.2-.5-.3-.7-.4-.3-.1-.5-.2-.8-.3-.2-.1-.5-.2-.7-.3l-1.3-.8c-.1-.1-.3-.2-.4-.2-.2-.1-.4-.1-.6-.2-.2-.1-.4-.2-.6-.2-.2 0-.3-.1-.5-.1-.2-.1-.4-.1-.6-.1-.2 0-.4 0-.5-.1-.2-.1-.3-.1-.5-.1-.2 0-.4 0-.5-.1-.2-.1-.3-.1-.5-.1-.2 0-.4-.1-.5-.1C7.1 11 6.9 11 6.8 11.2c-.1.2-.1.4-.1.6s.1.4.2.6l1.3 2.2c.2.3.4.6.6.9.2.3.4.5.6.8.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.3.4.6.6.9.2.2.3.5.5.7.1.3.3.5.4.8.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.2.3.5.5.7.1.3.3.5.4.8.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9.2.3.3.6.5.9q.2-.3.4-.6c.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9.2-.3.3-.6.5-.9v-.1c.1-.1.2-.3.3-.4l-.2-.3c.1-.1.2-.2.3-.3.1-.1.3-.2.4-.2.1-.1.3-.2.4-.3.1-.1.3-.2.4-.3.1-.1.3-.2.4-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.1-.1.3-.2.4-.3.1-.1.2-.2.3-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3.2-.1.3-.2.5-.3s.3-.2.5-.3a5.5 a5.5 0 00-.7-.4c-.2-.1-.4-.2-.5-.3z" />
        </svg>
        <span class="sr-only">Share on WhatsApp</span>
      </a>

      <!-- Email Button -->
      <a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-orange-400 to-red-500 text-white
                  dark:from-orange-500 dark:to-red-600">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M2.01 4.2 C1 4.8 1 5 1 5 c0 .6.2 1.2.6 1.6 l7.8 7.8 C10.1 16.5 11.2 17 12.5 17 s2.4-.5 3.5-.6 l.1-1.1 -.1-.1 c-.1-.1-.2-.2-.2-.2 C15.4 15.3 14 14.2 13 13 L6.7 6.7 c-.5-.5-.8-.7-1.3-.8 C4.9 5.8 4.6 5.8 4.2 5.8 c-.4 0-.8.1-1.2.2 C2.5 6 2.3 6.1 2.1 6.1 L2.1 4.2 M21.9 4.2 C20.9 4.8 20.9 5 20.9 5 c0 .6-.2 1.2-.6 1.6 l-7.8 7.8 C13.8 16.5 12.8 17 11.5 17 s-2.4-.5-3.5-.6 l-.1-1.1 .1-.1 c.1-.1.2-.2.2-.2 C8.5 15.3 10 14.2 11 13 l6.3-6.3 c.5-.5.8-.7 1.3-.8 C19.1 5.8 19.4 5.8 19.8 5.8 c.4 0 .8.1 1.2.2 C21.4 6 21.6 6.1 21.8 6.1 L21.9 4.2 M2.01 4.2 C1 4.8 1 5 1 5 c0 .6.2 1.2.6 1.6 l7.8 7.8 C10.1 16.5 11.2 17 12.5 17 s2.4-.5 3.5-.6 l.1-1.1 -.1-.1 c-.1-.1-.2-.2-.2-.2 C15.4 15.3 14 14.2 13 13 L6.7 6.7 c-.5-.5-.8-.7-1.3-.8 C4.9 5.8 4.6 5.8 4.2 5.8 c-.4 0-.8.1-1.2.2 L2.1 6.1 L2.1 4.2 M21.9 4.2 C20.9 4.8 20.9 5 20.9 5 c0 .6-.2 1.2-.6 1.6 l-7.8 7.8 C13.8 16.5 12.8 17 11.5 17 s-2.4-.5-3.5-.6 l-.1-1.1 .1-.1 c.1-.1.2-.2.2-.2 C8.5 15.3 10 14.2 11 13 l6.3-6.3 c.5-.5.8-.7 1.3-.8 C19.1 5.8 19.4 5.8 19.8 5.8 c.4 0 .8.1 1.2.2 C21.4 6 21.6 6.1 21.8 6.1 L21.9 4.2" />
        </svg>
        <span class="sr-only">Share via Email</span>
      </a>

      <!-- Pinterest Button -->
      <a href="#" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-red-600 to-red-800 text-white
                  dark:from-red-700 dark:to-red-900">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12.01 2.2 C6.53 2.2 2.15 6.6 2.15 12.1 c0 1.7.45 3.3.13 4.1 L2 21.8 l5.1-.9 c.7.3 1.4.4 2.2.4 L12.01 22 c5.48 0 9.87-4.4 9.87-9.9 C21.88 6.6 17.5 2.2 12.01 2.2 M17.7 10.4 c-.4 1.7-.5 2.5-.9 3.8-1.1 3.5-3.5 5.5-6.6 5.5-2.2 0-3.6-1.1-4.2-2.1-.8-1.3-.9-2.5-.9-3.8 0-1.2.2-2.3.6-3.4 1-2.9 3.5-5 6.7-5 2.5 0 4.1.8 4.7 1.9.7 1.1.9 2.5.4 4.1zm-4.7-2.7c-1.2 0-2.2.4-2.8 1.1-.6.7-.8 1.6-.8 2.5s.2 1.8.8 2.5c.6.7 1.6 1.1 2.8 1.1 1.2 0 2.2-.4 2.8-1.1.6-.7.8-1.6.8-2.5s-.2-1.8-.8-2.5c-.6-.7-1.6-1.1-2.8-1.1z" />
        </svg>
        <span class="sr-only">Share on Pinterest</span>
      </a>

      <!-- Link Copy Button -->
      <button type="button" aria-label="Copy link" class="share-button group relative flex items-center justify-center p-3 rounded-xl overflow-hidden shadow-md transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95
                  bg-gradient-to-r from-purple-500 to-indigo-600 text-white
                  dark:from-purple-600 dark:to-indigo-700">
        <div class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 group-focus:opacity-10 transition-opacity duration-200"></div>
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
          <path d="M12 4 C8.68 4 6 6.68 6 10 s2.68 6 6 6 c.5 0 .9-.4 1-.9.1-.5-.2-1-.7-1.1-.3-.1-.5-.1-.7-.1-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4c0 1.1-.5 2.1-1.3 2.8-.4.4-.4 1-.1 1.4.3.4.9.5 1.3.2 1.1-1 1.8-2.5 1.8-4.4 C18 6.68 15.32 4 12 4 M12 20 c-3.32 0-6-2.68-6-6 s2.68-6 6-6 c.5 0 .9.4 1 .9.1.5-.2 1-.7 1.1-.3.1-.5.1-.7.1-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4c0-1.1-.5-2.1-1.3-2.8-.4-.4-.4-1-.1-1.4.3-.4.9-.5 1.3-.2 1.1 1 1.8 2.5 1.8 4.4 C18 17.32 15.32 20 12 20 z" />
        </svg>
        <span class="sr-only">Copy link</span>
      </button>
    </div>
  </div>
</div>

360_viewer_component

Un complejo componente de visor de productos de 360° con microinteracciones, un esquema de color púrpura/violeta y compatibilidad con modo oscuro, adecuado para sitios web comerciales/corporativos.

Abrir Vista previa

                
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-6xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl">
    <div class="grid grid-cols-1 lg:grid-cols-2 min-h-[400px]">

      <!-- Left Section: 360 Viewer Area -->
      <div class="relative bg-gradient-to-br from-purple-100 to-indigo-200 dark:from-purple-900 dark:to-indigo-950 flex items-center justify-center p-4 min-h-[300px]">
        <div class="absolute inset-0 bg-contain bg-center bg-no-repeat opacity-20 dark:opacity-10" style="background-image: url('https://www.svgrepo.com/show/511397/sphere-3d-rotate.svg');"></div>

        <!-- Main 360 Image Placeholder -->
        <div class="relative w-full max-w-lg aspect-square bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden border border-purple-300 dark:border-purple-600 shadow-lg group">
          <img src="https://picsum.photos/600/600?random=1" alt="360 Product View" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">

          <!-- Interactive Overlay - Mimics Rotation -->
          <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 bg-black bg-opacity-30 dark:bg-opacity-50">
            <p class="text-white text-lg sm:text-xl font-bold tracking-wide animate-pulse">Rotate 360°</p>
          </div>

          <!-- Rotation Indicator -->
          <div class="absolute right-2 bottom-2 text-white bg-purple-600 dark:bg-purple-800 px-2 py-1 rounded-full text-xs opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300">
            Drag to spin
          </div>
        </div>

        <!-- Controls Placeholder -->
        <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2">
          <button aria-label="Previous View" class="p-2 rounded-full bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 text-white shadow-md transition-all duration-200 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-purple-400">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
          </button>
          <button aria-label="Next View" class="p-2 rounded-full bg-purple-500 hover:bg-purple-600 dark:bg-purple-700 dark:hover:bg-purple-600 text-white shadow-md transition-all duration-200 transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-purple-400">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>

      <!-- Right Section: Details & Interaction -->
      <div class="p-6 sm:p-8 lg:p-10 flex flex-col justify-between">
        <div>
          <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-3 leading-tight">
            Quantum 5000
          </h2>
          <p class="text-purple-600 dark:text-purple-400 font-semibold text-lg sm:text-xl mb-4">
            Next-Gen Interstellar Hub
          </p>
          <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-6">
            Explore the future with the Quantum 5000. Its innovative design and advanced features provide an unparalleled experience for any corporate venture. Precision engineering meets limitless possibilities.
          </p>

          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Key Features:</h3>
            <ul class="space-y-2 text-gray-600 dark:text-gray-400 text-sm sm:text-base">
              <li class="flex items-center group">
                <svg class="w-5 h-5 mr-2 text-purple-500 dark:text-purple-400 transform group-hover:scale-110 group-hover:rotate-6 transition-transform duration-200" 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 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>
                <span class="transition-colors duration-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">Enhanced Modular Design</span>
              </li>
              <li class="flex items-center group">
                <svg class="w-5 h-5 mr-2 text-purple-500 dark:text-purple-400 transform group-hover:scale-110 group-hover:rotate-6 transition-transform duration-200" 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 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>
                <span class="transition-colors duration-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">AI-Powered Decision Matrix</span>
              </li>
              <li class="flex items-center group">
                <svg class="w-5 h-5 mr-2 text-purple-500 dark:text-purple-400 transform group-hover:scale-110 group-hover:rotate-6 transition-transform duration-200" 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 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>
                <span class="transition-colors duration-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">Galactic Connectivity Protocol</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- Call to Action / Pricing -->
        <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between mt-6 gap-4">
          <div class="sm:text-right text-gray-900 dark:text-white">
            <p class="text-sm text-gray-500 dark:text-gray-400">Starting from</p>
            <p class="text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400">$7,999<span class="text-xl font-normal">/unit</span></p>
          </div>
          <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 transition-all duration-300 ease-in-out transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-800">
            <svg class="-ml-1 mr-2 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 15.422 4.26 16 5 16h11a1 1 0 100-2H5l1-1h10a1 1 0 00.894-.553l3-6A1 1 0 0019 4H9.68L8.174 1.67A1 1 0 007.05 1H3zM6 17a2 2 0 11-4 0 2 2 0 014 0zM16 17a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
            Request a Demo
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Carrusel de moda otoñal juguetón

Un componente deslizante de carrusel lúdico y divertido para marcas de moda y belleza, con una estética alegre, elementos redondeados y una combinación de colores otoñales. Admite capacidad de respuesta y modo oscuro.

Abrir Vista previa

                <section class="bg-orange-50 dark:bg-gray-900 py-12 sm:py-16 lg:py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-extrabold text-orange-900 dark:text-orange-200 text-center mb-10 sm:mb-12 lg:mb-16 font-serif tracking-tight leading-tight">
      Autumn Trends on Repeat!
    </h2>
    
    <!-- Carousel Container -->
    <div class="relative flex items-center justify-center">
      <!-- Navigation Buttons (hidden, for illustrative purposes of interactivity) -->
      <button aria-label="Previous Slide" class="absolute left-0 top-1/2 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg z-10 hidden md:block focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600 transition duration-300 transform hover:scale-105">
        <svg class="h-6 w-6 text-orange-700 dark:text-orange-300 transform rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </button>
      <button aria-label="Next Slide" class="absolute right-0 top-1/2 -translate-y-1/2 bg-white/70 dark:bg-gray-800/70 p-3 rounded-full shadow-lg z-10 hidden md:block focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-600 transition duration-300 transform hover:scale-105">
        <svg class="h-6 w-6 text-orange-700 dark:text-orange-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </button>

      <!-- Carousel Slides (Illustrative - In a real scenario, this would be JS-driven) -->
      <div class="relative w-full overflow-hidden">
        <div class="flex space-x-6 lg:space-x-8 px-4 sm:px-0 snap-x snap-mandatory overflow-x-auto pb-4 scrollbar-hide">
          <!-- Slide 1 -->
          <div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
            <div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
              <img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1015/600/400" alt="Cozy Autumn Sweater">
              <div class="p-2">
                <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Sunset Comfort Sweater</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Wrap yourself in warmth and style. Perfect for chilly evenings.</p>
                <span class="inline-block bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">New Collection</span>
                <div class="flex justify-between items-center">
                  <span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$79.99</span>
                  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
                    Snag Yours!
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Slide 2 -->
          <div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
            <div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
              <img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1018/600/400" alt="Autumn Forest Boots">
              <div class="p-2">
                <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Wanderlust Trail Boots</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Adventure awaits with these durable and stylish boots.</p>
                <span class="inline-block bg-brown-100 dark:bg-brown-900 text-brown-700 dark:text-brown-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">Best Seller</span>
                <div class="flex justify-between items-center">
                  <span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$120.00</span>
                  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
                    Grab a Pair!
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Slide 3 -->
          <div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
            <div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
              <img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1020/600/400" alt="Autumn Scarf">
              <div class="p-2">
                <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Fireside Plaid Scarf</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">A touch of tartan charm for your autumn ensemble.</p>
                <span class="inline-block bg-burgundy-100 dark:bg-burgundy-900 text-burgundy-700 dark:text-burgundy-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">Limited Edition</span>
                <div class="flex justify-between items-center">
                  <span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$45.50</span>
                  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
                    Wrap it Up!
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- Slide 4 -->
          <div class="flex-none w-full sm:w-1/2 lg:w-1/3 snap-center">
            <div class="bg-white dark:bg-gray-800 rounded-3xl overflow-hidden shadow-xl p-4 sm:p-6 transform transition duration-500 hover:scale-105 hover:shadow-2xl ring-4 ring-orange-200 dark:ring-orange-700/50">
              <img class="w-full h-64 object-cover object-center rounded-2xl mb-4 shadow" src="https://picsum.photos/id/1025/600/400" alt="Autumn Handbag">
              <div class="p-2">
                <h3 class="text-2xl font-bold text-orange-800 dark:text-orange-100 mb-2 font-serif">Harvest Moon Handbag</h3>
                <p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Carry your essentials in elegant seasonal style.</p>
                <span class="inline-block bg-orange-100 dark:bg-orange-900 text-orange-700 dark:text-orange-200 text-xs font-semibold px-3 py-1 rounded-full mb-4">New Arrival</span>
                <div class="flex justify-between items-center">
                  <span class="text-3xl font-extrabold text-burgundy-700 dark:text-burgundy-200">$95.00</span>
                  <button class="bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white font-semibold py-2 px-6 rounded-full shadow-md transition duration-300 transform hover:-translate-y-1 ring-4 ring-transparent hover:ring-orange-300 dark:hover:ring-orange-800">
                    Add to Cart!
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Indicator Dots (Illustrative) -->
      <div class="absolute bottom-0 translate-y-full flex space-x-2 pt-4 sm:pt-6">
        <span class="block w-3 h-3 rounded-full bg-orange-400 dark:bg-orange-500 opacity-75"></span>
        <span class="block w-3 h-3 rounded-full bg-orange-300 dark:bg-orange-600 opacity-50"></span>
        <span class="block w-3 h-3 rounded-full bg-orange-300 dark:bg-orange-600 opacity-50"></span>
        <span class="block w-3 h-3 rounded-full bg-orange-300 dark:bg-orange-600 opacity-50"></span>
      </div>
    </div>
  </div>
</section>

<style>
  /* Hide scrollbar for Chrome, Safari and Opera */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Hide scrollbar for IE, Edge and Firefox */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
</style>

Skeuomorphic_Dating_Carousel

Un componente deslizante de carrusel simple y receptivo con elementos de diseño esqueuomórficos y un esquema de color análogo, adecuado para plataformas sociales o de citas. Incluye soporte para modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-300 via-pink-300 to-red-300 dark:from-purple-900 dark:via-pink-900 dark:to-red-900 p-4 font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl xl:max-w-2xl bg-gradient-to-br from-white to-gray-100 dark:from-gray-800 dark:to-gray-900 rounded-3xl shadow-xl border-4 border-gray-200 dark:border-gray-700 overflow-hidden" style="box-shadow: inset 0px 4px 8px rgba(0,0,0,0.1), inset 0px -4px 8px rgba(255,255,255,0.7), 0px 10px 20px rgba(0,0,0,0.2);">
    <div class="p-6 sm:p-8 md:p-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-tight" style="text-shadow: 1px 1px 2px rgba(255,255,255,0.6), -1px -1px 2px rgba(0,0,0,0.2);">
        Find Your Match
      </h2>

      <!-- Carousel Item (static for this HTML-only example, would be dynamic with JS) -->
      <div class="flex flex-col items-center text-center">
        <div class="relative w-48 h-48 sm:w-64 sm:h-64 md:w-72 md:h-72 rounded-full overflow-hidden mb-6 filter drop-shadow-lg" style="box-shadow: inset 0px 2px 4px rgba(0,0,0,0.1), inset 0px -2px 4px rgba(255,255,255,0.7), 0px 6px 12px rgba(0,0,0,0.2);">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile Picture" class="w-full h-full object-cover border-4 border-white dark:border-gray-800 rounded-full grayscale hover:grayscale-0 transition-all duration-300 ease-in-out">
          <div class="absolute inset-0 rounded-full border-4 border-purple-400 dark:border-purple-600 animate-pulse" style="filter: blur(2px);"></div>
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-gray-50 mb-2" style="text-shadow: 1px 1px 2px rgba(255,255,255,0.4), -1px -1px 2px rgba(0,0,0,0.1);">
          Jessica, 28
        </h3>
        <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 mb-4 px-4">
          Passionate traveler, dog lover, and always up for an adventure! Looking for someone to share laughs with.
        </p>
      </div>

      <!-- Navigation Buttons (skeuomorphic design) -->
      <div class="flex justify-between items-center mt-8 px-4" role="group" aria-label="Carousel Navigation">
        <button class="relative p-3 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-700 dark:text-gray-200 shadow-lg transform active:scale-95 transition-all duration-150 ease-in-out focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700" style="box-shadow: inset 0px 2px 4px rgba(255,255,255,0.7), inset 0px -2px 4px rgba(0,0,0,0.15), 0px 4px 8px rgba(0,0,0,0.15);">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
          </svg>
          <span class="sr-only">Previous Profile</span>
        </button>

        <button class="relative p-3 rounded-full bg-gradient-to-br from-green-300 to-green-500 dark:from-green-600 dark:to-green-800 text-white shadow-lg transform active:scale-95 transition-all duration-150 ease-in-out focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700" style="box-shadow: inset 0px 2px 4px rgba(255,255,255,0.7), inset 0px -2px 4px rgba(0,0,0,0.15), 0px 4px 8px rgba(0,0,0,0.15);">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 sm:h-9 sm:w-9" viewBox="0 0 20 20" fill="currentColor">
            <path d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" />
          </svg>
          <span class="sr-only">Add to Favorites</span>
        </button>

        <button class="relative p-3 rounded-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-700 dark:text-gray-200 shadow-lg transform active:scale-95 transition-all duration-150 ease-in-out focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-700" style="box-shadow: inset 0px 2px 4px rgba(255,255,255,0.7), inset 0px -2px 4px rgba(0,0,0,0.15), 0px 4px 8px rgba(0,0,0,0.15);">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 sm:h-8 sm:w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
          </svg>
          <span class="sr-only">Next Profile</span>
        </button>
      </div>

      <!-- Indicators (Skeuomorphic dots) -->
      <div class="flex justify-center space-x-2 mt-8">
        <div class="w-3 h-3 rounded-full bg-purple-500 dark:bg-purple-700 shadow-md" style="box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1), inset 0px -1px 2px rgba(255,255,255,0.4);"></div>
        <div class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 shadow-md" style="box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1), inset 0px -1px 2px rgba(255,255,255,0.4);"></div>
        <div class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 shadow-md" style="box-shadow: inset 0px 1px 2px rgba(0,0,0,0.1), inset 0px -1px 2px rgba(255,255,255,0.4);"></div>
      </div>
    </div>
  </div>
</div>

Componente de información sobre herramientas de Material Design - Reserva/Reserva

Un componente de información sobre herramientas complejo y receptivo inspirado en Material Design para sistemas de reservas, con colores apagados/desaturados, efectos de profundidad y compatibilidad con el modo oscuro. Proporciona información detallada al pasar el cursor por encima/enfocar.

Abrir Vista previa

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

  <div class="relative group">
    <button class="relative z-10 px-6 py-3 rounded-lg text-lg font-medium 
                   bg-blue-600 hover:bg-blue-700 text-white 
                   focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
                   transition duration-300 ease-in-out
                   dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">
      View Reservation Details
    </button>

    <!-- Tooltip Container -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 
                  w-80 md:w-96 lg:w-[420px] 
                  p-0 rounded-xl 
                  shadow-xl 
                  transform scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 
                  group-focus-within:scale-100 group-focus-within:opacity-100 
                  transition-all duration-300 ease-in-out 
                  origin-bottom 
                  pointer-events-none group-hover:pointer-events-auto group-focus-within:pointer-events-auto
                  overflow-hidden 
                  bg-white dark:bg-gray-800 
                  border border-gray-200 dark:border-gray-700">

      <!-- Material Design Header -->
      <div class="relative px-5 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-700 dark:to-indigo-700 
                  text-white rounded-t-xl overflow-hidden">
        <div class="absolute inset-0 bg-pattern-dots opacity-10"></div>
        <h3 class="text-xl font-bold mb-1">Reservation #A1B2C3D4</h3>
        <p class="text-sm opacity-90">Your upcoming booking details</p>

        <!-- Avatar or Icon -->
        <div class="absolute top-4 right-5">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white/50 shadow-md">
        </div>
      </div>

      <!-- Tooltip Content -->
      <div class="p-5 text-gray-700 dark:text-gray-300 text-sm">

        <div class="grid grid-cols-2 gap-y-3 gap-x-4 mb-4">
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Service</p>
            <p class="text-base">Dental Check-up</p>
          </div>
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Provider</p>
            <p class="text-base">Dr. Emily White</p>
          </div>
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Date</p>
            <p class="text-base">Oct 26, 2024</p>
          </div>
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Time</p>
            <p class="text-base">10:15 AM - 11:00 AM</p>
          </div>
          <div class="col-span-2">
            <p class="font-semibold text-gray-500 dark:text-gray-400">Location</p>
            <p class="text-base">123 Health Dr, C<ctrl61>linic City</p>
          </div>
        </div>

        <hr class="my-4 border-gray-200 dark:border-gray-700">

        <div class="flex justify-between items-center mb-4">
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Status</p>
            <span class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">
              Confirmed
            </span>
          </div>
          <div class="text-right">
            <p class="font-semibold text-gray-500 dark:text-gray-400">Attendees</p>
            <div class="flex -space-x-2 justify-end mt-1">
              <img class="w-7 h-7 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Attendee 1">
              <img class="w-7 h-7 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Attendee 2">
              <div class="w-7 h-7 rounded-full border-2 border-white dark:border-gray-800 bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-xs text-gray-600 dark:text-gray-300">+1</div>
            </div>
          </div>
        </div>

        <!-- Call to Action Buttons -->
        <div class="pt-4 border-t border-gray-100 dark:border-gray-700 flex justify-end space-x-2">
          <button class="px-4 py-2 rounded-lg text-sm font-medium 
                         text-gray-600 hover:text-gray-900 hover:bg-gray-100 
                         focus:outline-none focus:ring-2 focus:ring-gray-300 
                         dark:text-gray-300 dark:hover:text-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
            Reschedule
          </button>
          <button class="px-4 py-2 rounded-lg text-sm font-medium 
                         bg-blue-500 hover:bg-blue-600 text-white 
                         focus:outline-none focus:ring-2 focus:ring-blue-400 
                         dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-500">
            Manage Booking
          </button>
        </div>
      </div>

      <!-- Tail for the tooltip -->
      <div class="absolute top-full left-1/2 -ml-2 w-0 h-0 border-x-8 border-x-transparent border-t-8 border-t-white 
                  dark:border-t-gray-800 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300"></div>

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

<!-- Custom pattern for header (can be placed in a style block or external CSS if allowed) -->
<style>
  .bg-pattern-dots {
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 8px 8px;
  }
</style>

Componente de formulario de pago - Cuidado de la salud/Médico

Un componente de formulario de pago complejo y receptivo con un tema de diseño de acuarela suave y artístico, un esquema de color neutro cálido y soporte para modo oscuro, adecuado para aplicaciones médicas y de atención médica.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gradient-to-br from-rose-50 to-orange-50 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden relative">
    <!-- Artistic Overlay -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none" style="background-image: url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 1000 1000\'><filter id=\'blur\'><feGaussianBlur in=\'SourceGraphic\' stdDeviation=\'50\'/></filter><rect fill=\'rgb(240,240,240)\' width=\'100%\' height=\'100%\'/><path fill=\'rgb(230,220,210)\' d=\'M0,500 C150,700 300,300 500,450 C700,600 850,200 1000,400 L1000,0 L0,0 Z\' filter=\'url(%23blur)\' opacity=\'0.5\'/><path fill=\'rgb(245,235,225)\' d=\'M0,300 C100,200 200,400 350,300 C500,200 600,500 750,400 C900,300 1000,500 1000,500 L1000,0 L0,0 Z\' filter=\'url(%23blur)\' opacity=\'0.7\'/></svg>'); background-size: cover;"></div>

    <div class="relative z-10 p-6 sm:p-10 lg:p-12">
      <header class="mb-8 text-center">
        <h1 class="text-3xl sm:text-4xl font-extrabold text-gray-800 dark:text-orange-100 mb-2 leading-tight tracking-tight drop-shadow-sm">Complete Your Order</h1>
        <p class="text-lg text-gray-600 dark:text-gray-300">Secure and confidential checkout for your healthcare needs.</p>
      </header>

      <form class="grid grid-cols-1 lg:grid-cols-2 gap-x-10 gap-y-8">

        <!-- Shipping Information -->
        <section class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 shadow-inner">
          <h2 class="text-2xl font-bold text-gray-700 dark:text-orange-200 mb-6 pb-2 border-b border-gray-200 dark:border-gray-600">Shipping Information</h2>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label for="first-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">First Name</label>
              <input type="text" id="first-name" name="first-name" autocomplete="given-name" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="Jane">
            </div>
            <div>
              <label for="last-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Last Name</label>
              <input type="text" id="last-name" name="last-name" autocomplete="family-name" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="Doe">
            </div>
            <div class="md:col-span-2">
              <label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Address</label>
              <input type="text" id="address" name="address" autocomplete="street-address" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="123 Main St">
            </div>
            <div>
              <label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">City</label>
              <input type="text" id="city" name="city" autocomplete="address-level2" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="Anytown">
            </div>
            <div>
              <label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">State / Province</label>
              <input type="text" id="state" name="state" autocomplete="address-level1" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="CA">
            </div>
            <div>
              <label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">ZIP / Postal Code</label>
              <input type="text" id="zip" name="zip" autocomplete="postal-code" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="90210">
            </div>
            <div>
              <label for="country" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Country</label>
              <select id="country" name="country" autocomplete="country-name" class="mt-1 block w-full pl-3 pr-10 py-2 text-base bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-rose-500 focus:border-rose-500 sm:text-sm rounded-md text-gray-900 dark:text-gray-100">
                <option>United States</option>
                <option>Canada</option>
                <option>Mexico</option>
              </select>
            </div>
          </div>
        </section>

        <!-- Payment Information -->
        <section class="bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 shadow-inner">
          <h2 class="text-2xl font-bold text-gray-700 dark:text-orange-200 mb-6 pb-2 border-b border-gray-200 dark:border-gray-600">Payment Information</h2>
          <div class="grid grid-cols-1 gap-6">
            <div>
              <label for="card-name" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Name on Card</label>
              <input type="text" id="card-name" name="card-name" autocomplete="cc-name" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="Jane Doe">
            </div>
            <div>
              <label for="card-number" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Card Number</label>
              <input type="text" id="card-number" name="card-number" autocomplete="cc-number" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="XXXX-XXXX-XXXX-XXXX">
            </div>
            <div class="grid grid-cols-3 gap-4">
              <div class="col-span-2">
                <label for="expiration-date" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Expiration Date</label>
                <input type="text" id="expiration-date" name="expiration-date" autocomplete="cc-exp" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="MM/YY">
              </div>
              <div>
                <label for="cvv" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">CVV</label>
                <input type="text" id="cvv" name="cvv" autocomplete="cc-csc" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="123">
              </div>
            </div>
            <div>
              <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Email Address</label>
              <input type="email" id="email" name="email" autocomplete="email" class="mt-1 block w-full px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-rose-500 focus:border-rose-500 text-gray-900 dark:text-gray-100" placeholder="[email protected]">
            </div>
          </div>
        </section>

        <!-- Order Summary -->
        <section class="lg:col-span-2 bg-gray-50 dark:bg-gray-700 rounded-2xl p-6 shadow-inner">
          <h2 class="text-2xl font-bold text-gray-700 dark:text-orange-200 mb-6 pb-2 border-b border-gray-200 dark:border-gray-600">Order Summary</h2>
          <div class="space-y-4 mb-6">
            <div class="flex justify-between items-center">
              <span class="text-gray-600 dark:text-gray-300">Medical Consultation</span>
              <span class="font-semibold text-gray-900 dark:text-gray-100">$75.00</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-600 dark:text-gray-300">Lab Test Kit</span>
              <span class="font-semibold text-gray-900 dark:text-gray-100">$120.00</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-gray-600 dark:text-gray-300">Shipping</span>
              <span class="font-semibold text-gray-900 dark:text-gray-100">$10.00</span>
            </div>
            <div class="border-t border-gray-200 dark:border-gray-600 pt-4 flex justify-between items-center">
              <span class="text-xl font-bold text-gray-800 dark:text-orange-100">Total</span>
              <span class="text-2xl font-extrabold text-rose-600 dark:text-rose-400">$205.00</span>
            </div>
          </div>
        </section>

        <!-- Terms and Conditions & Submit Button -->
        <div class="lg:col-span-2 flex flex-col sm:flex-row items-center justify-between mt-4">
          <div class="flex items-start mb-4 sm:mb-0">
            <input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-rose-600 focus:ring-rose-500 border-gray-300 dark:border-gray-600 rounded dark:bg-gray-800 dark:checked:bg-rose-600">
            <label for="terms" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">
              I agree to the <a href="#" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300">Terms of Service</a> and <a href="#" class="font-medium text-rose-600 hover:text-rose-500 dark:text-rose-400 dark:hover:text-rose-300">Privacy Policy</a>.
            </label>
          </div>
          <button type="submit" class="w-full sm:w-auto px-8 py-3 bg-gradient-to-r from-rose-500 to-rose-700 hover:from-rose-600 hover:to-rose-800 text-white font-semibold rounded-full shadow-lg transform transition-transform duration-200 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
            Place Order
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

RetroReservationCards

Un conjunto responsivo de tarjetas de reserva/reserva de temática retro con soporte para modo oscuro, adecuado para sistemas de citas o reservas. Las características incluyen colores vintage apagados y una sutil estética de los años 80/90.

Abrir Vista previa

                <div class="min-h-screen bg-gray-100 p-4 font-sans dark:bg-gray-900 md:p-8">
  <div class="container mx-auto px-4 py-8">
    <h1 class="mb-8 text-center text-4xl font-bold uppercase tracking-wider text-gray-800 dark:text-gray-200 md:text-5xl">
      <span class="block animate-pulse text-red-600 dark:text-red-400">Book Your Slot!</span>
      <span class="block text-2xl normal-case text-gray-600 dark:text-gray-400">Pick Your Perfect Time</span>
    </h1>

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

      <!-- Card 1: Available Slot -->
      <div class="transform rounded-lg border-2 border-orange-400 bg-gradient-to-br from-yellow-200 to-orange-300 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-blue-600">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Morning Session</h2>
          <span class="rounded-full bg-green-500 px-3 py-1 text-sm font-semibold text-white">Available</span>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">Start your day right with a productive morning slot.</p>
        <div class="mb-4 text-gray-600 dark:text-gray-400">
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 26, 2023</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 09:00 AM - 10:30 AM</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 90 mins</p>
        </div>
        <div class="mb-4 flex items-center">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
            <p class="text-gray-700 dark:text-gray-300">Alex Johnson</p>
          </div>
        </div>
        <button class="w-full rounded-md bg-purple-600 px-4 py-3 font-bold uppercase text-white shadow-lg transition-colors duration-300 hover:bg-purple-700 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:bg-purple-500 dark:hover:bg-purple-600 dark:focus:ring-purple-700">
          Book Now!
        </button>
      </div>

      <!-- Card 2: Fully Booked Slot -->
      <div class="transform rounded-lg border-2 border-red-500 bg-gradient-to-br from-red-200 to-red-400 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-red-600">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Afternoon Deep Dive</h2>
          <span class="rounded-full bg-red-600 px-3 py-1 text-sm font-semibold text-white">Fully Booked</span>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">This popular slot is currently at full capacity.</p>
        <div class="mb-4 text-gray-600 dark:text-gray-400">
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 26, 2023</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 01:00 PM - 03:00 PM</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 120 mins</p>
        </div>
        <div class="mb-4 flex items-center">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
            <p class="text-gray-700 dark:text-gray-300">Maria Gomez</p>
          </div>
        </div>
        <button class="w-full rounded-md bg-gray-500 px-4 py-3 font-bold uppercase text-white shadow-lg cursor-not-allowed dark:bg-gray-600" disabled>
          Sold Out
        </button>
      </div>

      <!-- Card 3: Pending Confirmation Slot -->
      <div class="transform rounded-lg border-2 border-blue-500 bg-gradient-to-br from-blue-200 to-cyan-300 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-green-600">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Evening Chill</h2>
          <span class="rounded-full bg-yellow-500 px-3 py-1 text-sm font-semibold text-white">Pending</span>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">Awaiting confirmation for this twilight session.</p>
        <div class="mb-4 text-gray-600 dark:text-gray-400">
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 27, 2023</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 06:00 PM - 07:00 PM</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 60 mins</p>
        </div>
        <div class="mb-4 flex items-center">
          <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
            <p class="text-gray-700 dark:text-gray-300">David Lee</p>
          </div>
        </div>
        <button class="w-full rounded-md bg-gray-400 px-4 py-3 font-bold uppercase text-white shadow-lg cursor-not-allowed dark:bg-gray-500" disabled>
          Awaiting Conf.
        </button>
      </div>

      <!-- Card 4: Special Event Slot -->
      <div class="transform rounded-lg border-2 border-purple-500 bg-gradient-to-br from-purple-200 to-pink-300 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-orange-600">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Exclusive Workshop</h2>
          <span class="rounded-full bg-blue-600 px-3 py-1 text-sm font-semibold text-white">Special</span>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">A unique opportunity! Limited spots available.</p>
        <div class="mb-4 text-gray-600 dark:text-gray-400">
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 28, 2023</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 10:00 AM - 01:00 PM</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 180 mins</p>
        </div>
        <div class="mb-4 flex items-center">
          <img src="https://randomuser.me/api/portraits/women/7.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
            <p class="text-gray-700 dark:text-gray-300">Sophia Kim</p>
          </div>
        </div>
        <button class="w-full rounded-md bg-cyan-600 px-4 py-3 font-bold uppercase text-white shadow-lg transition-colors duration-300 hover:bg-cyan-700 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-500 dark:hover:bg-cyan-600 dark:focus:ring-cyan-700">
          Register Now!
        </button>
      </div>

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

Componente de insignias de productos de comercio electrónico

Un componente complejo de insignias de productos de comercio electrónico con un uso intensivo de degradados de color de una paleta de bosque / verde, transiciones suaves y un diseño receptivo con soporte para modo oscuro. Adecuado para mostrar el estado del producto, ofertas o categorías.

Abrir Vista previa

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">

  <!-- Component Title (Optional) -->
  <h2 class="text-2xl sm:text-3xl font-extrabold text-center mb-8 sm:mb-12 text-gray-900 dark:text-gray-100">
    Featured Product Badges
  </h2>

  <div class="max-w-7xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">

    <!-- Badge Card 1: New Arrival -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <img class="w-full h-48 sm:h-56 object-cover" src="https://picsum.photos/id/1018/600/400" alt="Forest Product">
      <div class="absolute top-4 left-4">
        <span class="px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-emerald-500 to-green-600 shadow-md transform hover:scale-105 transition-transform duration-200 ease-in-out">
          🚀 New Arrival
        </span>
      </div>
      <div class="p-6">
        <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Organic Green Tea</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Premium hand-picked tea leaves from sustainable farms.</p>
        <div class="flex justify-between items-center">
          <span class="text-2xl font-extrabold text-emerald-600 dark:text-emerald-400">$19.99</span>
          <button class="px-5 py-2 rounded-lg bg-gradient-to-r from-lime-500 to-emerald-500 text-white font-medium shadow-md hover:from-lime-600 hover:to-emerald-600 transform hover:scale-105 transition-all duration-300 ease-in-out">
            Add to Cart
          </button>
        </div>
      </div>
    </div>

    <!-- Badge Card 2: Limited Stock / Sale -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <img class="w-full h-48 sm:h-56 object-cover" src="https://picsum.photos/id/1020/600/400" alt="Nature Product">
      <div class="absolute top-4 right-4">
        <span class="px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-red-500 to-orange-500 shadow-md animate-pulse transform hover:scale-105 transition-transform duration-200 ease-in-out">
          🔥 Limited Stock
        </span>
      </div>
      <div class="absolute bottom-4 left-4">
        <span class="px-3 py-1 rounded-full text-xs font-semibold text-white bg-gradient-to-tr from-purple-500 to-pink-500 shadow-sm">
          Sale -20%
        </span>
      </div>
      <div class="p-6 pt-10">
        <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Bamboo Eco Toothbrush</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Sustainable alternative for your daily dental care.</p>
        <div class="flex justify-between items-center">
          <div>
            <span class="text-lg font-semibold line-through text-gray-400 dark:text-gray-500 mr-2">$9.99</span>
            <span class="text-2xl font-extrabold text-orange-600 dark:text-orange-400">$7.99</span>
          </div>
          <button class="px-5 py-2 rounded-lg bg-gradient-to-r from-emerald-600 to-teal-700 text-white font-medium shadow-md hover:from-emerald-700 hover:to-teal-800 transform hover:scale-105 transition-all duration-300 ease-in-out">
            Buy Now
          </button>
        </div>
      </div>
    </div>

    <!-- Badge Card 3: Bestseller / Eco-Friendly -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300 ease-in-out transform hover:-translate-y-1">
      <img class="w-full h-48 sm:h-56 object-cover" src="https://picsum.photos/id/1025/600/400" alt="River Product">
      <div class="absolute top-0 right-0 p-4">
        <svg class="w-10 h-10 text-yellow-400 drop-shadow-lg" 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.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.92 8.72a1 1 0 01.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
        </svg>
      </div>
      <div class="absolute top-4 left-4">
        <span class="px-4 py-2 rounded-full text-sm font-semibold text-white bg-gradient-to-r from-blue-500 to-indigo-600 shadow-md transform hover:scale-105 transition-transform duration-200 ease-in-out">
          🏆 Bestseller
        </span>
      </div>
      <div class="absolute bottom-4 right-4">
        <span class="px-3 py-1 rounded-full text-xs font-semibold text-white bg-gradient-to-tl from-green-400 to-blue-400 shadow-sm">
          🌱 Eco-Friendly
        </span>
      </div>
      <div class="p-6 pt-10">
        <h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Reusable Water Bottle</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Durable, insulated, and stylish for everyday hydration.</p>
        <div class="flex justify-between items-center">
          <span class="text-2xl font-extrabold text-indigo-600 dark:text-indigo-400">$29.50</span>
          <button class="px-5 py-2 rounded-lg bg-gradient-to-r from-emerald-700 to-green-800 text-white font-medium shadow-md hover:from-emerald-800 hover:to-green-900 transform hover:scale-105 transition-all duration-300 ease-in-out">
            View Details
          </button>
        </div>
      </div>
    </div>

  </div>
</div>

1 ... 20 21 22 23 24 ... 307

Categorías

Todos los componentes