Componentes de búsqueda

Categorías

Componentes Información sobre herramientas

Información sobre herramientas

Información adicional que se muestra al pasar el cursor

Descripción emergente monocromática brutalista

Un complejo componente de información sobre herramientas monocromático de estilo brutalista diseñado para sitios de blogs/contenido, con múltiples elementos interactivos y capacidad de respuesta completa con soporte para modo oscuro.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 transition-colors duration-300">
  <div class="relative group max-w-sm mx-auto">
    <a href="#" class="inline-block px-6 py-3 text-lg font-extrabold tracking-tight uppercase border-4 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-transparent transition-all duration-300 transform -skew-x-6 hover:translate-x-1 hover:-translate-y-1 hover:shadow-brutal dark:hover:shadow-brutal-dark focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600">
      Hover Me
    </a>

    <div class="absolute hidden group-hover:block transition-all duration-300 ease-out transform scale-0 origin-bottom-left group-hover:scale-100 mt-4 md:mt-6 left-1/2 -ml-24 w-60 sm:w-72 md:w-80 lg:w-96 p-4 md:p-6 bg-gray-200 dark:bg-gray-800 border-4 border-gray-800 dark:border-gray-200 shadow-brutal dark:shadow-brutal-dark z-50 overflow-hidden">
      <div class="absolute -top-4 left-6 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-800 dark:border-b-gray-200 transform rotate-[135deg]"></div>
      <div class="absolute -top-4 left-6 w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-200 dark:border-b-gray-800 transform rotate-[135deg] -translate-x-0.5 -translate-y-0.5"></div>

      <h3 class="text-xl md:text-2xl font-extrabold uppercase mb-2 text-gray-900 dark:text-gray-100 border-b-2 border-dashed border-gray-500 dark:border-gray-500 pb-1">
        Brutal Tip Title
      </h3>
      <p class="text-sm md:text-base text-gray-700 dark:text-gray-300 mb-4 tracking-tight leading-snug">
        This is a raw and unpolished tooltip designed with a brutalist aesthetic. It's meant to convey information bluntly and directly. 
        Consider this a visual declaration, not a gentle suggestion.
      </p>
      
      <div class="mb-4 flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-4 border-t-2 border-dashed border-gray-500 dark:border-gray-500 pt-3">
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Author" class="w-10 h-10 rounded-full border-2 border-gray-800 dark:border-gray-200 object-cover flex-shrink-0">
        <div>
          <p class="text-xs md:text-sm font-bold uppercase text-gray-800 dark:text-gray-200">By John 'The Hammer' Doe</p>
          <p class="text-xs text-gray-600 dark:text-gray-400">March 15, 2023</p>
        </div>
      </div>

      <div class="flex flex-wrap gap-2 mb-4">
        <span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Brutalism</span>
        <span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Monochromatic</span>
        <span class="px-2 py-1 text-xs font-bold uppercase border-2 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-gray-300 dark:bg-gray-700 select-none">#Content</span>
      </div>

      <a href="#" class="inline-block w-full text-center px-4 py-2 text-sm md:text-base font-extrabold uppercase border-4 border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200 bg-transparent transition-all duration-300 transform -skew-x-3 hover:translate-x-0.5 hover:-translate-y-0.5 hover:shadow-brutal-sm dark:hover:shadow-brutal-sm-dark focus:outline-none focus:ring-4 focus:ring-gray-400 dark:focus:ring-gray-600">
        Read More
      </a>

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

<style>
  /* Custom shadows for brutalism style */
  .shadow-brutal {
    box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 1);
  }
  .dark .shadow-brutal-dark {
    box-shadow: 10px 10px 0px 0px rgba(255, 255, 255, 1);
  }
  .shadow-brutal-sm {
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 1);
  }
  .dark .shadow-brutal-sm-dark {
    box-shadow: 4px 4px 0px 0px rgba(255, 255, 255, 1);
  }

  /* Triangle for tooltip */
  .group-hover\:block {
    left: 50%;
    transform: translateX(-50%) translateY(10px) rotate(0deg) scale(0);
    transform-origin: bottom center;
  }
  .group:hover .group-hover\:block {
    transform: translateX(-50%) translateY(0px) rotate(0deg) scale(1);
  }
  @media (min-width: 768px) {
    .group-hover\:block {
      left: 50%;
      transform: translateX(-50%) translateY(20px) rotate(0deg) scale(0);
      transform-origin: bottom center;
    }
    .group:hover .group-hover\:block {
      transform: translateX(-50%) translateY(0px) rotate(0deg) scale(1);
    }
  }
</style>

Información sobre herramientas de comercio electrónico minimalista en colores pastel

Componente minimalista de información sobre herramientas en tonos pastel para comercio electrónico, con diseño responsivo y soporte para modo oscuro.

Abrir Vista previa

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

  <!-- Tooltip Container -->
  <div class="group relative flex">
    <button class="px-4 py-2 bg-pink-200 text-pink-800 rounded-md shadow-sm
                   hover:bg-pink-300 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:ring-opacity-75
                   dark:bg-pink-700 dark:text-pink-100 dark:hover:bg-pink-600">
      Hover for Product Info
    </button>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full mb-2 hidden group-hover:block
                w-64 p-3 rounded-lg shadow-lg bg-white text-gray-800
                text-sm text-center
                dark:bg-gray-700 dark:text-gray-100
                transform -translate-x-1/2 left-1/2
                opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      <p class="font-semibold text-lg mb-2">Product Name</p>
      <p class="text-md mb-3">A brief description of the product and its key features for e-commerce.</p>
      <p class="text-pink-500 font-bold">Price: $49.99</p>

      <!-- Tooltip Arrow -->
      <div class="absolute top-full left-1/2 -ml-2 w-0 h-0 border-8 border-transparent
                  border-t-white dark:border-t-gray-700"></div>
    </div>
  </div>

</div>

Información sobre herramientas neumórficas

Información sobre herramientas neumórficas para portafolio

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-10">
  <div class="relative flex items-center group">
    <button class="px-6 py-3 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-800 dark:text-gray-200 font-semibold focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition-all duration-300">
      Hover Me
    </button>
    <div class="absolute bottom-full mb-3 hidden group-hover:block px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 text-sm opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300">
      This is a neumorphic tooltip!
      <div class="absolute left-1/2 transform -translate-x-1/2 top-full w-0 h-0 border-t-8 border-t-gray-200 dark:border-t-gray-700 border-x-8 border-x-transparent"></div>
    </div>
  </div>
</div>

Componente de información sobre herramientas

Un componente de información sobre herramientas complejo, receptivo, compatible con temas oscuros, Skeuomorphic-Vibrant para paneles que usan Tailwind CSS. No se necesita JavaScript, solo HTML con clases Tailwind. Para el modo oscuro, usa el prefijo dark: de Tailwind para el estilo. Las imágenes son de picsum.photos y randomuser.me.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative flex items-center group">
    <button class="px-6 py-3 text-white transition-all duration-300 transform bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg shadow-2xl hover:scale-105 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
                   dark:from-blue-700 dark:to-indigo-800
                   font-bold text-lg
                   relative overflow-hidden
                   before:absolute before:inset-0 before:bg-gradient-to-br before:from-white before:to-transparent before:opacity-0 before:transition-opacity before:duration-300
                   hover:before:opacity-20
                   after:absolute after:inset-0 after:border-t-2 after:border-l-2 after:border-white after:opacity-0 after:transition-opacity after:duration-300
                   hover:after:opacity-100
                   ">
      Hover for Dashboard Insights
    </button>
    
    <div class="absolute bottom-full mb-6 w-96 p-6
                bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900
                text-gray-900 dark:text-gray-100
                rounded-2xl shadow-skeuomorphic
                opacity-0 group-hover:opacity-100 transition-opacity duration-500
                transform translate-y-4 group-hover:-translate-y-0
                pointer-events-none group-hover:pointer-events-auto
                border-t-4 border-l-4 border-gray-300 dark:border-gray-600
                overflow-hidden
                before:absolute before:inset-0 before:bg-gradient-to-br before:from-white before:to-transparent before:opacity-10 before:rounded-2xl
                after:absolute after:bottom-0 after:left-1/2 after:-mb-4 after:-ml-2 after:w-0 after:h-0 after:border-solid after:border-8 after:border-transparent
                after:border-t-gray-400 dark:after:border-t-gray-900 after:drop-shadow-lg
                ">
      
      <div class="flex items-center space-x-4 mb-4 border-b pb-4 border-gray-300 dark:border-gray-600">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 shadow-lg">
        <div>
          <p class="font-bold text-lg text-indigo-700 dark:text-indigo-300">Analytics Summary</p>
          <p class="text-sm text-gray-700 dark:text-gray-300">Last updated: 2 minutes ago</p>
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 mb-4">
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">Total Sales:</p>
          <p class="font-bold text-xl text-green-600 dark:text-green-400">$12,450</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">New Users:</p>
          <p class="font-bold text-xl text-purple-600 dark:text-purple-400">320</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">Bounce Rate:</p>
          <p class="font-bold text-xl text-red-600 dark:text-red-400">1.5%</p>
        </div>
        <div class="bg-gray-300 dark:bg-gray-800 p-3 rounded-lg shadow-inner-skeuomorphic">
          <p class="text-sm text-gray-700 dark:text-gray-300">Avg. Session:</p>
          <p class="font-bold text-xl text-blue-600 dark:text-blue-400">8m 30s</p>
        </div>
      </div>

      <div class="flex justify-between items-center text-sm text-gray-700 dark:text-gray-300">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-medium">View Full Report</a>
        <div class="flex items-center space-x-2">
          <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
            <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>Real-time Data</span>
        </div>
      </div>

      <div class="absolute inset-0 border-r-4 border-b-4 border-gray-300 dark:border-gray-600 rounded-2xl pointer-events-none opacity-50"></div>
      <div class="absolute inset-0 bg-stone-300 dark:bg-stone-800 opacity-20 rounded-2xl filter blur-sm"></div>

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

<style>
  /* Custom shadow for Skeuomorphism */
  .shadow-skeuomorphic {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3), -10px -10px 20px rgba(255, 255, 255, 0.1);
  }
  .dark .shadow-skeuomorphic {
     box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7), -10px -10px 20px rgba(255, 255, 255, 0.05);
  }
  .shadow-inner-skeuomorphic {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
  }
  .dark .shadow-inner-skeuomorphic {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.05);
  }
  .group:hover .absolute.bottom-full:after {
    border-top-color: #A0AEC0; /* Light Gray */
  }
  .dark .group:hover .absolute.bottom-full:after {
    border-top-color: #4A5568; /* Dark Gray */
  }
</style>

Componente de información sobre herramientas

Un componente de descripción emergente de temática oscura receptivo, parte de un esquema de color triádico, adecuado para un portafolio. Construido con Tailwind CSS para una estética simple y minimalista.

Abrir Vista previa

                <div class="relative flex justify-center items-center h-screen bg-gray-900 dark:bg-gray-800">
  <div class="group relative flex">
    <button class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-300 ease-in-out">Hover Me</button>
    <div class="opacity-0 w-48 bg-gray-700 dark:bg-gray-900 text-white text-center text-xs rounded-lg py-2 absolute z-10 group-hover:opacity-100 bottom-full -translate-x-1/2 left-1/2 ml-0 mb-3 pointer-events-none transition-opacity duration-300">
      <p>This is a triadic color scheme tooltip for your portfolio.</p>
      <svg class="absolute text-gray-700 dark:text-gray-900 h-2 w-full left-0 top-full" x="0px" y="0px" viewBox="0 0 255 255" xml:space="preserve"><polygon class="fill-current" points="0,0 127.5,127.5 255,0"/></svg>
    </div>
  </div>
</div>

Componente de descripción emergente de Brutalismo

Componente de información sobre herramientas de estilo brutalismo para redes sociales, con un esquema de color en escala de grises y elementos interactivos complejos. Es responsivo y admite el modo oscuro usando Tailwind CSS, sin JavaScript.

Abrir Vista previa

                <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Tooltip Container -->
  <div class="group relative flex flex-col items-center">
    <!-- User Avatar (Trigger for Tooltip) -->
    <img class="w-24 h-24 rounded-full border-4 border-gray-900 dark:border-gray-100 cursor-pointer object-cover" src="https://api.randomuser.me/portraits/men/32.jpg" alt="User Avatar">
    
    <!-- Tooltip Content -->
    <div class="absolute bottom-full mb-6 w-80 p-6 bg-gray-900 dark:bg-gray-100 text-gray-100 dark:text-gray-900 border-4 border-gray-700 dark:border-gray-300 transform translate-y-4 opacity-0 group-hover:opacity-100 group-hover:-translate-y-0 transition-all duration-300 ease-in-out pointer-events-none group-hover:pointer-events-auto shadow-[8px_8px_0_rgba(0,0,0,0.8)] dark:shadow-[8px_8px_0_rgba(255,255,255,0.4)]">
      <h3 class="text-xl font-bold uppercase mb-2">User Profile</h3>
      <p class="text-sm border-b-2 border-gray-700 dark:border-gray-300 pb-2 mb-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      
      <div class="flex justify-between items-center text-sm mb-2">
        <span class="font-semibold">Followers:</span>
        <span>1.2M</span>
      </div>
      <div class="flex justify-between items-center text-sm mb-4">
        <span class="font-semibold">Following:</span>
        <span>345</span>
      </div>

      <div class="grid grid-cols-3 gap-2 mb-4">
        <img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social1/100/100" alt="Post 1">
        <img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social2/100/100" alt="Post 2">
        <img class="w-full h-16 object-cover border-2 border-gray-700 dark:border-gray-300" src="https://picsum.photos/seed/social3/100/100" alt="Post 3">
      </div>

      <a href="#" class="block w-full py-2 text-center uppercase font-bold bg-gray-700 dark:bg-gray-300 text-gray-100 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-100 hover:bg-gray-600 dark:hover:bg-gray-400 transition-colors duration-200">
        View Profile
      </a>
      
      <!-- Brutalist Arrow -->
      <div class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-[calc(100%-8px)] w-0 h-0 border-l-[20px] border-l-transparent border-r-[20px] border-r-transparent border-t-[20px] border-t-gray-900 dark:border-t-gray-100 group-hover:translate-y-[calc(100%-12px)] transition-transform duration-300"></div>
    </div>
  </div>
</div>

Información sobre herramientas del panel de control de Skeuomorphic

Un componente de información sobre herramientas complejo y esqueuomórfico para un tablero, con un esquema de color triádico y un diseño receptivo con soporte para modo oscuro, creado con Tailwind CSS y sin JavaScript.

Abrir Vista previa

                <div class="relative flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Tooltip Container -->
  <div class="relative group">
    <!-- Trigger Element (e.g., a button or icon) -->
    <button class="px-6 py-3 text-white rounded-lg shadow-lg bg-gradient-to-br from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 transform hover:scale-105">
      Hover for Dashboard Info
    </button>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 w-80 p-6 rounded-xl shadow-2xl opacity-0 group-hover:opacity-100 group-hover:visible transition-all duration-500 transform scale-90 group-hover:scale-100
                bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900
                border-4 border-gray-300 dark:border-gray-600
                hover:from-gray-300 hover:to-gray-500 dark:hover:from-gray-600 dark:hover:to-gray-800
                flex flex-col space-y-4
                pointer-events-none group-hover:pointer-events-auto">

      <!-- Top Bar with Icon and Title -->
      <div class="flex items-center pb-3 border-b-2 border-gray-300 dark:border-gray-600">
        <svg class="w-8 h-8 mr-3 text-indigo-700 dark:text-indigo-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 17L12 21.75l2.25-4.75M12 17V3m-4.5 9h9"></path>
        </svg>
        <h3 class="text-xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-md">Dashboard Overview</h3>
      </div>

      <!-- Key Metrics Section -->
      <div class="grid grid-cols-2 gap-4">
        <div class="p-3 rounded-lg bg-gradient-to-br from-red-300 to-red-500 dark:from-red-700 dark:to-red-900 shadow-inner">
          <p class="text-sm font-semibold text-white dark:text-gray-200">Revenue</p>
          <p class="text-lg font-bold text-white dark:text-gray-100">$12,450</p>
        </div>
        <div class="p-3 rounded-lg bg-gradient-to-br from-green-300 to-green-500 dark:from-green-700 dark:to-green-900 shadow-inner">
          <p class="text-sm font-semibold text-white dark:text-gray-200">Users</p>
          <p class="text-lg font-bold text-white dark:text-gray-100">8,900</p>
        </div>
        <div class="p-3 rounded-lg bg-gradient-to-br from-yellow-300 to-yellow-500 dark:from-yellow-700 dark:to-yellow-900 shadow-inner">
          <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">Completion</p>
          <p class="text-lg font-bold text-gray-800 dark:text-gray-100">75%</p>
        </div>
        <div class="p-3 rounded-lg bg-gradient-to-br from-purple-300 to-purple-500 dark:from-purple-700 dark:to-purple-900 shadow-inner">
          <p class="text-sm font-semibold text-white dark:text-gray-200">Avg. Time</p>
          <p class="text-lg font-bold text-white dark:text-gray-100">4:30 min</p>
        </div>
      </div>

      <!-- Recent Activity / News Feed Mock-up -->
      <div class="p-3 rounded-lg bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900 shadow-inner border border-gray-200 dark:border-gray-700">
        <h4 class="mb-2 text-md font-semibold text-gray-700 dark:text-gray-200">Recent Activity</h4>
        <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-300">
          <li class="flex items-center">
            <img class="object-cover w-6 h-6 mr-2 rounded-full shadow" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
            <span>New user

Componente de información sobre herramientas

Un componente de información sobre herramientas de diseño de materiales receptivo con esquema de color monocromático para comercio electrónico, con soporte para modo oscuro. No solo JavaScript, HTML y Tailwind CSS.

Abrir Vista previa

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

  <!-- Product Card (Example to show tooltip in context) -->
  <div class="group relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 hover:shadow-xl">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Product Image">
    <div class="p-6">
      <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Stylish Headphones</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Immerse yourself in rich, clear sound with these premium headphones.</p>
      <div class="flex items-center justify-between">
        <span class="text-2xl font-bold text-gray-900 dark:text-gray-50">$149.99</span>
        
        <!-- Tooltip Trigger (e.g., Add to Cart Button) -->
        <button class="relative bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-medium py-2 px-4 rounded-full transition-colors duration-300 group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
          Add to Cart

          <!-- Tooltip Content -->
          <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-3 py-1.5 bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900 text-sm rounded-md opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 pointer-events-none shadow-lg">
            Add item to your shopping cart
            <svg class="absolute top-full left-1/2 -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-100 transform rotate-180" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 0L0 10h20L10 0z"/>
            </svg>
          </div>
        </button>
      </div>
    </div>
  </div>

  <!-- Another Tooltip Example (e.g., Info Icon) -->
  <div class="group relative ml-12">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-500 dark:text-gray-400 cursor-pointer transition-colors duration-300 hover:text-blue-600 dark:hover:text-blue-500" viewBox="0 0 20 20" fill="currentColor">
      <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2h1a1 1 0 001-1V9a1 1 0 00-1-1H9zm6 3a1 1 0 100 2h2a1 1 0 100-2h-2z" clip-rule="evenodd" />
    </svg>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-3 py-1.5 bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900 text-sm rounded-md opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 pointer-events-none shadow-lg">
      More information about the product
      <svg class="absolute top-full left-1/2 -translate-x-1/2 w-3 h-3 text-gray-800 dark:text-gray-100 transform rotate-180" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 0L0 10h20L10 0z"/>
      </svg>
    </div>
  </div>

</div>

Componente de información sobre herramientas

Un componente de información sobre herramientas neumórfico con un esquema de color complementario, complejidad moderada y diseño receptivo con soporte para temas oscuros, adecuado para un blog o consumo de contenido.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-10">

  <div class="relative flex flex-col items-center group">
    <button class="px-6 py-3 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 font-semibold transition-all duration-300 hover:shadow-neumorphic-light-hover dark:hover:shadow-neumorphic-dark-hover focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
      Hover Me
    </button>
    
    <div class="absolute bottom-full mb-4 hidden group-hover:block w-64 p-4 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform translate-y-2 group-hover:translate-y-0 pointer-events-none group-hover:pointer-events-auto">
      <p class="font-bold text-lg mb-2 text-blue-600 dark:text-blue-400">Neumorphic Tooltip</p>
      <p>This is a an example of a neumorphic tooltip. It uses subtle shadows to create a soft, extruded look from the background.</p>
      <div class="absolute left-1/2 transform -translate-x-1/2 bottom-[-10px] w-0 h-0 border-l-8 border-l-transparent border-r-8 border-r-transparent border-t-8 border-t-gray-200 dark:border-t-gray-800"></div>
    </div>
  </div>

</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #2e2e2e;
  }

  .shadow-neumorphic-light-hover {
    box-shadow: inset 3px 3px 6px #a3b1c6, inset -3px -3px 6px #ffffff;
  }

  .dark .shadow-neumorphic-dark-hover {
    box-shadow: inset 3px 3px 6px #1c1c1c, inset -3px -3px 6px #2e2e2e;
  }
  
  /* Complementary Colors (Example: Blue and Orange for accents) */
  .text-blue-600 {
    color: #2563eb;
  }
  .dark .text-blue-400 {
    color: #60a5fa;
  }

  .text-orange-500 {
    color: #f97316;
  }
  .dark .text-orange-400 {
    color: #fb923c;
  }
</style>

Minimalist_Tooltip

Componente de información sobre herramientas de diseño minimalista / plano para comercio electrónico con diseño receptivo y soporte de tema oscuro. Utiliza un esquema de color complementario y tiene una complejidad moderada.

Abrir Vista previa

                <div class="relative group">
  <button class="text-blue-700 hover:text-blue-800 dark:text-red-400 dark:hover:text-red-500 font-bold py-2 px-4 rounded">Hover Me</button>
  <div class="absolute bottom-full mb-2 hidden group-hover:block w-48 bg-blue-100 text-blue-800 text-sm rounded py-1 px-2 dark:bg-red-900 dark:text-red-100">
    Product information or details here.
  </div>
</div>