Componentes Fichas de producto Componente de tarjetas de productos neumórficas - Paleta retro
Componente de tarjetas de productos neumórficas - Paleta retro

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

Código HTML

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

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

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

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

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

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

      <!-- Hidden details for complex interaction - example only -->
      <div class="absolute inset-0 rounded-2xl bg-lime-100/90 dark:bg-gray-800/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto">
        <button class="
          p-3 rounded-full bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
        ">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
        </button>
      </div>

    </div>

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

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

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

      <!-- Hidden details for complex interaction - example only -->
      <div class="absolute inset-0 rounded-2xl bg-lime-100/90 dark:bg-gray-800/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto">
        <button class="
          p-3 rounded-full bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
        ">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
        </button>
      </div>

    </div>

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

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

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

      <!-- Hidden details for complex interaction - example only -->
      <div class="absolute inset-0 rounded-2xl bg-lime-100/90 dark:bg-gray-800/90 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none group-hover:pointer-events-auto">
        <button class="
          p-3 rounded-full bg-lime-300 dark:bg-gray-600 shadow-neumorphic-light dark:shadow-neumorphic-dark
            text-lime-800 dark:text-gray-100 text-sm font-medium
            hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed
            focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-lime-100 dark:focus:ring-offset-gray-800 focus:ring-lime-500 dark:focus:ring-gray-400
            transition-all duration-200
        ">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
        </button>
      </div>

    </div>

  </div>

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

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

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

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

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

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

Componente Tarjetas de producto

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

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

Componente de tarjeta de producto con estilo brutalista, combinación de colores monocromática, nivel de complejidad complejo para fines de comercio electrónico.
Abrir