Composants Liste de souhaits Composant de la liste de souhaits

Composant de la liste de souhaits

Un composant de liste de souhaits de style Neumorphisme pour les médias sociaux, avec une palette de couleurs complémentaire. Il comprend un design réactif utilisant Tailwind CSS avec prise en charge du mode sombre. Seules les classes HTML et Tailwind sont utilisées, sans JavaScript. Les images proviennent de picsum.photos et les avatars de randomuser.me.

Aperçu

HTML Code

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

  <!-- Wishlist Container -->
  <div class="w-full max-w-4xl bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-8 md:p-12 transition-all duration-300">

    <h1 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-8 text-center">My Social Wishlist</h1>

    <!-- Wishlist Item 1 -->
    <div class="flex flex-col md:flex-row items-center bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-6 mb-6 transition-all duration-300">
      <img src="https://picsum.photos/seed/wish1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover shadow-neumorphic-light dark:shadow-neumorphic-dark flex-shrink-0 mb-4 md:mb-0 md:mr-6">
      <div class="flex-grow text-center md:text-left">
        <h2 class="text-xl md:text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Wireless Noise-Cancelling Headphones</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-3 text-sm md:text-base">Experience immersive audio with these premium headphones, perfect for travel and focus.</p>
        <div class="flex items-center justify-center md:justify-start space-x-2">
          <span class="text-lg font-bold text-indigo-600 dark:text-teal-400">$299.99</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$349.99</span>
        </div>
        <div class="flex flex-wrap justify-center md:justify-start gap-2 mt-4">
          <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Add to Cart
          </button>
          <button class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-100 font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Share
          </button>
          <button class="bg-red-500 hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Remove
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="flex flex-col md:flex-row items-center bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-6 mb-6 transition-all duration-300">
      <img src="https://picsum.photos/seed/wish2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover shadow-neumorphic-light dark:shadow-neumorphic-dark flex-shrink-0 mb-4 md:mb-0 md:mr-6">
      <div class="flex-grow text-center md:text-left">
        <h2 class="text-xl md:text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Smartwatch with Health Monitoring</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-3 text-sm md:text-base">Track your fitness, monitor health metrics, and stay connected on the go.</p>
        <div class="flex items-center justify-center md:justify-start space-x-2">
          <span class="text-lg font-bold text-indigo-600 dark:text-teal-400">$199.00</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$229.00</span>
        </div>
        <div class="flex flex-wrap justify-center md:justify-start gap-2 mt-4">
          <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Add to Cart
          </button>
          <button class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-100 font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Share
          </button>
          <button class="bg-red-500 hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Remove
          </button>
        </div>
      </div>
    </div>

    <!-- Social Sharing Section -->
    <div class="mt-8 pt-8 border-t border-gray-300 dark:border-gray-700 text-center">
      <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Share Your Wishlist</h3>
      <div class="flex justify-center flex-wrap gap-4">
        <button class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-semibold py-3 px-6 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-lg">
          <i class="fab fa-facebook-f mr-2"></i> Facebook
        </button>
        <button class="bg-blue-400 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-lg">
          <i class="fab fa-twitter mr-2"></i> Twitter
        </button>
        <button class="bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold py-3 px-6 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-lg">
          <i class="fab fa-instagram mr-2"></i> Instagram
        </button>
      </div>
    </div>

  </div>

  <!-- You might also like section (Example of complex elements) -->
  <div class="w-full max-w-4xl mt-12 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-8 md:p-12 transition-all duration-300">
    <h3 class="text-2xl md:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center">You Might Also Like</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Recommended Item 1 -->
      <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-4 text-center transition-all duration-300">
        <img src="https://picsum.photos/seed/rec1/120/120" alt="Recommended Product" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1">Ergonomic Office Chair</h4>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">$450.00</p>
        <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark text-sm transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark">
          View Item
        </button>
      </div>

      <!-- Recommended Item 2 -->
      <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-4 text-center transition-all duration-300">
        <img src="https://picsum.photos/seed/rec2/120/120" alt="Recommended Product" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1">Premium Coffee Machine</h4>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">$150.00</p>
        <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark text-sm transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark">
          View Item
        </button>
      </div>

      <!-- Recommended Item 3 -->
      <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-4 text-center transition-all duration-300">
        <img src="https://picsum.photos/seed/rec3/120/120" alt="Recommended Product" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1">Smart Home Hub</h4>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">$120.00</p>
        <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark text-sm transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark">
          View Item
        </button>
      </div>

    </div>
  </div>

  <!-- Friends

Composants associés

Composant de la liste de souhaits

Un composant de liste de souhaits réactif conçu dans une esthétique rétro/vintage, utilisant une palette de couleurs monochromatiques à des fins de commerce électronique.

Ouvrir

Composant de la liste de souhaits

Un composant de liste de souhaits réactif conçu avec une esthétique rétro/vintage, avec une palette de couleurs triadique et une prise en charge du mode sombre, idéal pour présenter des travaux ou des produits.

Ouvrir

Composant de la liste de souhaits

Composant de liste de souhaits réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Affichage d’une liste d’articles avec des images, des titres, des prix et des boutons de suppression. Conçu pour un tableau de bord aux couleurs vives.

Ouvrir