Rechercher des composants

Catégories

Composants Composants du commerce électronique

Composants du commerce électronique

Composants spécialement conçus pour les boutiques en ligne

Industrial_Sunset_Ecommerce_Component

Composant de commerce électronique complexe avec un style de design industriel, une palette de couleurs chaudes de coucher de soleil et une réactivité totale avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-100 p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen">

  <!-- Header/Navigation Placeholder -->
  <header class="flex justify-between items-center bg-stone-200 dark:bg-stone-800 p-4 mb-8 shadow-md rounded-lg border-b-4 border-amber-600 dark:border-amber-400">
    <h1 class="text-2xl font-bold text-amber-700 dark:text-amber-300">RAW Goods</h1>
    <nav class="hidden md:flex space-x-6">
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Shop</a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">About</a>
      <a href="#" class="text-stone-700 dark:text-stone-300 hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Contact</a>
    </nav>
    <div class="flex items-center space-x-4">
      <button class="p-2 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 transition-colors 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="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 1116 0 2 2 0 0116 0z"></path></svg>
      </button>
      <button class="md:hidden p-2 rounded-md bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-stone-400 dark:hover:bg-stone-600 transition-colors 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="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </header>

  <!-- Main Content Area -->
  <main class="grid grid-cols-1 lg:grid-cols-4 gap-8">

    <!-- Sidebar / Filters -->
    <aside class="lg:col-span-1 bg-stone-200 dark:bg-stone-800 p-6 rounded-lg shadow-md border border-amber-500 dark:border-amber-700">
      <h2 class="text-xl font-semibold mb-6 text-amber-700 dark:text-amber-300">Filters</h2>
      <div class="mb-6">
        <h3 class="font-medium text-lg mb-3 text-stone-700 dark:text-stone-300">Category</h3>
        <ul class="space-y-2 text-stone-600 dark:text-stone-400">
          <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Metalwork</a></li>
          <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Woodcraft</a></li>
          <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Textiles</a></li>
          <li><a href="#" class="hover:text-amber-600 dark:hover:text-amber-400 transition-colors duration-200">Concrete</a></li>
        </ul>
      </div>
      <div class="mb-6">
        <h3 class="font-medium text-lg mb-3 text-stone-700 dark:text-stone-300">Price Range</h3>
        <input type="range" min="0" max="500" value="250" class="w-full accent-amber-600 dark:accent-amber-400 h-2 rounded-lg appearance-none cursor-pointer bg-stone-400 dark:bg-stone-600 mb-2">
        <div class="flex justify-between text-sm text-stone-600 dark:text-stone-400">
          <span>$0</span>
          <span>$500+</span>
        </div>
      </div>
      <div class="mb-6">
        <h3 class="font-medium text-lg mb-3 text-stone-700 dark:text-stone-300">Material</h3>
        <div class="space-y-2">
          <label class="flex items-center text-stone-600 dark:text-stone-400">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-amber-600 dark:text-amber-400 rounded focus:ring-amber-500 dark:focus:ring-amber-300 border-stone-400 dark:border-stone-600 mr-2">
            Steel
          </label>
          <label class="flex items-center text-stone-600 dark:text-stone-400">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-amber-600 dark:text-amber-400 rounded focus:ring-amber-500 dark:focus:ring-amber-300 border-stone-400 dark:border-stone-600 mr-2">
            Oak
          </label>
          <label class="flex items-center text-stone-600 dark:text-stone-400">
            <input type="checkbox" class="form-checkbox h-4 w-4 text-amber-600 dark:text-amber-400 rounded focus:ring-amber-500 dark:focus:ring-amber-300 border-stone-400 dark:border-stone-600 mr-2">
            Copper
          </label>
        </div>
      </div>
      <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 px-4 rounded-md transition-colors duration-200 shadow-md">
        Apply Filters
      </button>
    </aside>

    <!-- Product Grid -->
    <section class="lg:col-span-3 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 auto-rows-min">
      
      <!-- Product Card 1 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/67/300/200" alt="Industrial Lamp" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Forged Iron Lamp</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Hand-forged from recycled steel, a raw and powerful statement piece for any industrial space.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$189.99</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.8</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/1025/300/200" alt="Concrete Planter" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Brutalist Concrete Planter</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">A sturdy, minimalist design crafted from raw concrete, perfect for modern urban gardens.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$75.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.5</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/1084/300/200" alt="Reclaimed Wood Table" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Reclaimed Oak Console</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Each piece unique, crafted from distressed reclaimed oak, showcasing its natural imperfections.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$499.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.9</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/401/300/200" alt="Copper Pendant Light" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Patina Copper Pendant</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Hand-hammered copper with a natural patina, perfect for adding warmth to any room.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$210.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.7</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 5 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/353/300/200" alt="Industrial Stool" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Raw Steel Stool</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Minimalist design, maximum durability. Crafted from solid steel for a truly industrial feel.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$120.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.6</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 6 -->
      <div class="bg-stone-200 dark:bg-stone-800 rounded-lg shadow-lg overflow-hidden border border-amber-500 dark:border-amber-700 transform hover:scale-105 transition-transform duration-300">
        <img src="https://picsum.photos/id/345/300/200" alt="Canvas Bag" class="w-full h-48 object-cover border-b border-amber-500 dark:border-amber-700">
        <div class="p-4">
          <h3 class="text-xl font-semibold mb-2 text-amber-700 dark:text-amber-300">Waxed Canvas Tote</h3>
          <p class="text-stone-600 dark:text-stone-400 text-sm mb-3">Durable and water-resistant, made from heavy-duty waxed canvas with copper rivets.</p>
          <div class="flex justify-between items-center mb-4">
            <span class="text-xl font-bold text-red-600 dark:text-red-400">$95.00</span>
            <div class="flex items-center space-x-1 text-yellow-500 dark:text-yellow-400">
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.882 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/></svg>
              <span>4.9</span>
            </div>
          </div>
          <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-400 dark:hover:bg-amber-500 text-white font-bold py-2 rounded-md transition-colors duration-200 shadow-md transform hover:-translate-y-1">
            Add to Cart
          </button>
        </div>
      </div>

    </section>

  </main>

  <!-- Pagination Placeholder -->
  <nav class="flex justify-center items-center space-x-2 mt-12" aria-label="Pagination">
    <a href="#" class="p-3 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
    </a>
    <a href="#" class="p-3 w-10 h-10 flex items-center justify-center rounded-full bg-amber-600 dark:bg-amber-400 text-white font-bold shadow-md">1</a>
    <a href="#" class="p-3 w-10 h-10 flex items-center justify-center rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">2</a>
    <a href="#" class="p-3 w-10 h-10 flex items-center justify-center rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">3</a>
    <span class="text-stone-600 dark:text-stone-400">...</span>
    <a href="#" class="p-3 w-10 h-10 flex items-center justify-center rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">10</a>
    <a href="#" class="p-3 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 hover:bg-amber-600 dark:hover:bg-amber-400 hover:text-white transition-colors duration-200 shadow-sm">
      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
    </a>
  </nav>

  <!-- Footer Placeholder -->
  <footer class="mt-12 text-center text-stone-600 dark:text-stone-400 text-sm border-t-4 border-amber-600 dark:border-amber-400 pt-8">
    <p>&copy; 2023 RAW Goods. All rights reserved.</p>
  </footer>

</div>

Composant Composants de commerce électronique

Un composant de réservation/réservation simple et minimaliste avec un style de typographie suisse/international, avec une palette de couleurs noir et blanc avec un accent vif. Il est entièrement réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="font-sans antialiased text-gray-900 bg-white dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-100 dark:border-gray-700">
    <div class="p-6">
      <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 tracking-tight leading-tight">Book Your Spot</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">Select your preferred date and time for a seamless experience.</p>

      <div class="mb-6">
        <label for="date-select" class="block text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2 tracking-wide">Date</label>
        <select id="date-select" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-colors duration-200">
          <option value="">Select a Date</option>
          <option value="2023-10-26">Thursday, October 26</option>
          <option value="2023-10-27">Friday, October 27</option>
          <option value="2023-10-28">Saturday, October 28</option>
          <option value="2023-10-29">Sunday, October 29</option>
        </select>
      </div>

      <div class="mb-6">
        <label for="time-select" class="block text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2 tracking-wide">Time</label>
        <div class="grid grid-cols-3 gap-2">
          <button class="relative px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            9:00 AM
            <span class="absolute top-0 right-0 -mr-1 -mt-1 w-3 h-3 bg-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold">5</span>
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            10:00 AM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/40 border-blue-500 dark:border-blue-400 font-semibold focus:outline-none focus:ring-2 focus:ring-blue-500 transform scale-105 shadow-md transition-all duration-200">
            11:00 AM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            1:00 PM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 cursor-not-allowed" disabled>
            2:00 PM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            3:00 PM
          </button>
        </div>
      </div>

      <button class="w-full py-3 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50 transition-colors duration-200 text-base uppercase tracking-wider">
        Confirm Booking
      </button>

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

Brutalism_Retro_Simple_E-commerce_Agriculture_Product_Card

Une fiche produit simple, de style brutaliste, pour un site Web d’agriculture/élevage en ligne avec une palette de couleurs rétro, avec une image de produit, un titre, un prix et un bouton d’ajout au panier. Conçu avec une prise en charge de la réactivité et du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-amber-100 dark:bg-zinc-900 border-4 border-amber-900 dark:border-lime-400 font-mono overflow-hidden">
  <div class="max-w-xs mx-auto bg-amber-50 dark:bg-stone-800 border-4 border-amber-900 dark:border-lime-400 shadow-lg dark:shadow-md dark:shadow-lime-600/50 transition-all duration-300 hover:shadow-xl dark:hover:shadow-lime-600/70 focus-within:ring-4 focus-within:ring-lime-600 focus-within:ring-offset-4 focus-within:ring-offset-amber-100 dark:focus-within:ring-offset-zinc-900 overflow-hidden">
    <div class="relative overflow-hidden aspect-w-16 aspect-h-9 sm:aspect-w-4 sm:aspect-h-3">
      <img src="https://picsum.photos/seed/agriculture/400/300" alt="Agricultural Product" class="w-full h-full object-cover object-center border-b-4 border-amber-900 dark:border-lime-400 group-hover:scale-105 transition-transform duration-300 ease-in-out">
      <div class="absolute top-0 right-0 p-2 bg-amber-900 dark:bg-lime-400 text-amber-50 dark:text-zinc-900 text-xs sm:text-sm font-bold border-l-4 border-b-4 border-amber-900 dark:border-lime-400 transform -translate-y-px translate-x-px">
        NEW
      </div>
    </div>
    <div class="p-4 sm:p-6 border-t-4 border-amber-900 dark:border-lime-400">
      <a href="#" class="block mt-2 mb-4 text-amber-900 dark:text-lime-400 text-xl sm:text-2xl font-extrabold uppercase leading-tight hover:underline focus:outline-none focus:ring-2 focus:ring-amber-900 dark:focus:ring-lime-400 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-800">
        Heirloom Seed Pack
      </a>
      <p class="text-stone-700 dark:text-stone-300 text-sm sm:text-base mb-4 line-clamp-2">
        Premium quality heirloom seeds for robust yields and sustainable farming.
      </p>
      <div class="flex items-baseline justify-between mb-6">
        <span class="text-2xl sm:text-3xl font-extrabold text-amber-900 dark:text-lime-400">
          $19.99
        </span>
        <span class="text-sm text-stone-500 dark:text-stone-400 line-through">
          $24.99
        </span>
      </div>
      <button class="w-full py-3 px-4 bg-amber-900 dark:bg-lime-400 text-amber-50 dark:text-zinc-900 text-lg sm:text-xl font-extrabold uppercase border-4 border-amber-900 dark:border-lime-400 whitespace-nowrap overflow-hidden text-ellipsis shadow-md dark:shadow-lg dark:shadow-lime-600/50 transition-colors duration-200 hover:bg-amber-800 dark:hover:bg-lime-500 focus:outline-none focus:ring-4 focus:ring-amber-900 dark:focus:ring-lime-400 focus:ring-offset-2 focus:ring-offset-amber-50 dark:focus:ring-offset-stone-800 active:border-amber-700 dark:active:border-lime-600">
        Add to Cart
      </button>
    </div>
  </div>
</div>

Composant Composants E-commerce - Documentation/Style Wiki

Un composant de commerce électronique complexe et réactif 'Documentation/Wiki' présentant des textures douces et peintes et des éléments artistiques avec une palette de couleurs bonbon/sucré (rose chewing-gum, vert menthe). Inclut la prise en charge du mode sombre et des éléments interactifs pour un site de documentation ou de base de connaissances.

Ouvrir Aperçu

                <div class="font-sans bg-pink-50/70 dark:bg-slate-900 min-h-screen p-4 sm:p-8 relative overflow-hidden">

  <!-- Background elements for 'watercolor/artistic' feel -->
  <div class="absolute top-0 left-0 w-64 h-64 bg-pink-200 opacity-30 rounded-full mix-blend-multiply filter blur-3xl animate-blob dark:bg-pink-700/30"></div>
  <div class="absolute top-1/4 right-0 w-80 h-80 bg-green-200 opacity-30 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000 dark:bg-green-700/30"></div>
  <div class="absolute bottom-0 left-1/4 w-72 h-72 bg-purple-200 opacity-30 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000 dark:bg-purple-700/30"></div>

  <div class="relative max-w-7xl mx-auto z-10">

    <!-- Header/Title Section -->
    <header class="text-center mb-10 md:mb-16">
      <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-pink-600 dark:text-pink-400 leading-tight mb-4 tracking-tighter drop-shadow-lg [text-shadow:_0_2px_2px_rgb(0_0_0_/_10%)]">
        Artistic E-commerce Components Wiki
      </h1>
      <p class="text-lg sm:text-xl text-pink-800 dark:text-pink-200 max-w-3xl mx-auto leading-relaxed opacity-90">
        Explore a collection of visually rich and responsive e-commerce components, crafted with a whimsical, artistic touch, perfect for your documentation site.
      </p>
    </header>

    <!-- Main Navigation/Category Section -->
    <nav class="mb-12">
      <div class="overflow-x-auto scrollbar-hide">
        <ul class="flex justify-center flex-wrap gap-2 md:gap-4 p-2 bg-white/70 backdrop-blur-sm rounded-full shadow-lg dark:bg-slate-800/70 border border-pink-200 dark:border-pink-900">
          <li>
            <a href="#product-cards" class="block px-4 py-2 sm:px-6 sm:py-3 rounded-full text-sm sm:text-base font-semibold text-pink-700 dark:text-pink-300 hover:bg-pink-100 hover:text-pink-900 transition-all duration-300 bg-pink-50 dark:bg-pink-900/40 relative group overflow-hidden">
              <span class="relative z-10">Product Cards</span>
              <span class="absolute inset-0 bg-gradient-to-r from-pink-300 to-purple-300 opacity-0 group-hover:opacity-40 transition-opacity duration-300 rounded-full blur-sm"></span>
            </a>
          </li>
          <li>
            <a href="#product-details" class="block px-4 py-2 sm:px-6 sm:py-3 rounded-full text-sm sm:text-base font-semibold text-pink-700 dark:text-pink-300 hover:bg-pink-100 hover:text-pink-900 transition-all duration-300 relative group overflow-hidden">
              <span class="relative z-10">Product Details</span>
              <span class="absolute inset-0 bg-gradient-to-r from-pink-300 to-purple-300 opacity-0 group-hover:opacity-40 transition-opacity duration-300 rounded-full blur-sm"></span>
            </a>
          </li>
          <li>
            <a href="#cart-elements" class="block px-4 py-2 sm:px-6 sm:py-3 rounded-full text-sm sm:text-base font-semibold text-pink-700 dark:text-pink-300 hover:bg-pink-100 hover:text-pink-900 transition-all duration-300 relative group overflow-hidden">
              <span class="relative z-10">Cart Elements</span>
              <span class="absolute inset-0 bg-gradient-to-r from-pink-300 to-purple-300 opacity-0 group-hover:opacity-40 transition-opacity duration-300 rounded-full blur-sm"></span>
            </a>
          </li>
          <li>
            <a href="#filters-sorting" class="block px-4 py-2 sm:px-6 sm:py-3 rounded-full text-sm sm:text-base font-semibold text-pink-700 dark:text-pink-300 hover:bg-pink-100 hover:text-pink-900 transition-all duration-300 relative group overflow-hidden">
              <span class="relative z-10">Filters & Sorting</span>
              <span class="absolute inset-0 bg-gradient-to-r from-pink-300 to-purple-300 opacity-0 group-hover:opacity-40 transition-opacity duration-300 rounded-full blur-sm"></span>
            </a>
          </li>
        </ul>
      </div>
    </nav>

    <!-- Section: Product Cards -->
    <section id="product-cards" class="mb-16">
      <h2 class="text-3xl sm:text-4xl font-bold text-pink-700 dark:text-pink-300 mb-8 [text-shadow:_0_2px_2px_rgb(0_0_0_/_5%)] border-b-2 border-pink-300/50 pb-2 flex items-center justify-between">
        Product Cards <span class="text-base text-pink-500 font-normal ml-4 hidden sm:inline">(Interactive Examples)</span>
      </h2>

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

        <!-- Product Card 1 -->
        <div class="group bg-white/80 dark:bg-slate-800/80 rounded-3xl p-6 shadow-xl ring-2 ring-pink-100 dark:ring-pink-900 backdrop-blur-sm overflow-hidden transform transition-transform duration-500 hover:scale-[1.02] hover:shadow-2xl relative border-2 border-transparent hover:border-pink-300 dark:hover:border-pink-600">
          <div class="absolute inset-0 bg-gradient-to-br from-pink-100 to-green-100 opacity-20 dark:from-pink-900/30 dark:to-green-900/30 transition-opacity duration-500 group-hover:opacity-40"></div>
          <div class="relative z-10">
            <div class="aspect-w-4 aspect-h-3 mb-4 rounded-xl overflow-hidden shadow-md border-2 border-pink-100 dark:border-pink-700">
              <img src="https://picsum.photos/400/300?random=1" alt="Watercolor Painting" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy">
            </div>
            <h3 class="text-xl font-bold text-pink-800 dark:text-pink-200 mb-2 truncate">Dreamy Watercolor Landscape</h3>
            <p class="text-pink-600 dark:text-pink-300 text-sm mb-3 line-clamp-2">An original watercolor piece capturing the serenity of nature with soft hues.</p>
            <div class="flex items-center justify-between mb-4">
              <span class="text-2xl font-extrabold text-pink-700 dark:text-pink-100 drop-shadow-sm">$120.00</span>
              <div class="flex items-center text-pink-500 dark:text-pink-400">
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 20.354l-7.416 3.863 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>
                <span class="ml-1 text-sm">4.8 (8 Reviews)</span>
              </div>
            </div>
            <button class="w-full bg-gradient-to-r from-pink-500 to-purple-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:from-pink-600 hover:to-purple-600 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-700 transition-all duration-300 transform hover:scale-105 active:scale-95 group-hover:scale-103">
              Add to Palette
            </button>
          </div>
        </div>

        <!-- Product Card 2 (with Badge) -->
        <div class="group bg-white/80 dark:bg-slate-800/80 rounded-3xl p-6 shadow-xl ring-2 ring-pink-100 dark:ring-pink-900 backdrop-blur-sm overflow-hidden transform transition-transform duration-500 hover:scale-[1.02] hover:shadow-2xl relative border-2 border-transparent hover:border-pink-300 dark:hover:border-pink-600">
          <div class="absolute inset-0 bg-gradient-to-br from-green-100 to-blue-100 opacity-20 dark:from-green-900/30 dark:to-blue-900/30 transition-opacity duration-500 group-hover:opacity-40"></div>
          <div class="relative z-10">
            <span class="absolute top-0 right-0 m-4 px-3 py-1 bg-green-500 text-white text-xs font-bold rounded-full shadow-md z-20 rotate-3 transform origin-top-right">New Arrival</span>
            <div class="aspect-w-4 aspect-h-3 mb-4 rounded-xl overflow-hidden shadow-md border-2 border-green-100 dark:border-green-700">
              <img src="https://picsum.photos/400/300?random=2" alt="Artistic Sketchbook" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" loading="lazy">
            </div>
            <h3 class="text-xl font-bold text-pink-800 dark:text-pink-200 mb-2 truncate">Abstract Floral Sketchbook</h3>
            <p class="text-pink-600 dark:text-pink-300 text-sm mb-3 line-clamp-2">A vibrant, hand-drawn sketchbook featuring expressive floral designs.</p>
            <div class="flex items-center justify-between mb-4">
              <span class="text-2xl font-extrabold text-pink-700 dark:text-pink-100 drop-shadow-sm">$45.00</span>
              <div class="flex items-center text-pink-500 dark:text-pink-400">
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 20.354l-7.416 3.863 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>
                <span class="ml-1 text-sm">5.0 (2 Reviews)</span>
              </div>
            </div>
            <button class="w-full bg-gradient-to-r from-green-500 to-teal-500 text-white font-bold py-3 px-6 rounded-full shadow-lg hover:from-green-600 hover:to-teal-600 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700 transition-all duration-300 transform hover:scale-105 active:scale-95 group-hover:scale-103">
              Discover More
            </button>
          </div>
        </div>

        <!-- Product Card 3 (Out of Stock) -->
        <div class="group bg-white/50 dark:bg-slate-900/50 rounded-3xl p-6 shadow-xl ring-2 ring-pink-100 dark:ring-pink-900 backdrop-blur-sm overflow-hidden relative border-2 border-transparent">
          <div class="absolute inset-0 bg-neutral-100 dark:bg-slate-700 opacity-70"></div>
          <div class="relative z-10 opacity-70 grayscale">
            <span class="absolute top-0 right-0 m-4 px-3 py-1 bg-red-500 text-white text-xs font-bold rounded-full shadow-md z-20 -rotate-3 transform origin-top-right">Sold Out</span>
            <div class="aspect-w-4 aspect-h-3 mb-4 rounded-xl overflow-hidden shadow-md border-2 border-red-100 dark:border-red-700">
              <img src="https://picsum.photos/400/300?random=3" alt="Ceramic Vase" class="w-full h-full object-cover" loading="lazy">
            </div>
            <h3 class="text-xl font-bold text-gray-600 dark:text-gray-400 mb-2 truncate">Hand-Painted Ceramic Vase</h3>
            <p class="text-gray-500 dark:text-gray-400 text-sm mb-3 line-clamp-2">A unique, artisan-crafted vase with delicate floral paintings.</p>
            <div class="flex items-center justify-between mb-4">
              <span class="text-2xl font-extrabold text-gray-500 dark:text-gray-400">$75.00</span>
              <div class="flex items-center text-gray-400 dark:text-gray-500">
                <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 20.354l-7.416 3.863 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>
                <span class="ml-1 text-sm">4.9 (5 Reviews)</span>
              </div>
            </div>
            <button class="w-full bg-gray-400 text-white font-bold py-3 px-6 rounded-full shadow-lg cursor-not-allowed" disabled>
              Sold Out
            </button>
          </div>
        </div>

      </div>
    </section>

    <!-- Section: Product Details Component -->
    <section id="product-details" class="mb-16">
      <h2 class="text-3xl sm:text-4xl font-bold text-pink-700 dark:text-pink-300 mb-8 [text-shadow:_0_2px_2px_rgb(0_0_0_/_5%)] border-b-2 border-pink-300/50 pb-2">
        Detailed Product View
      </h2>

      <div class="bg-white/80 dark:bg-slate-800/80 rounded-3xl p-6 sm:p-8 shadow-xl ring-2 ring-pink-100 dark:ring-pink-900 backdrop-blur-sm flex flex-col lg:flex-row gap-8 lg:gap-12 relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-100/50 to-green-100/50 dark:from-pink-900/20 dark:to-green-900/20"></div>
        <div class="relative z-10 flex-shrink-0 w-full lg:w-2/5">
          <div class="aspect-w-16 aspect-h-12 rounded-2xl overflow-hidden shadow-lg border-4 border-pink-200 dark:border-pink-700 mb-4">
            <img src="https://picsum.photos/600/450?random=4" alt="Detailed Floral Canvas" class="w-full h-full object-cover transform hover:scale-105 transition-transform duration-500" loading="lazy">
          </div>
          <div class="grid grid-cols-4 gap-3">
            <img src="https://picsum.photos/100/80?random=5" alt="Thumb 1" class="w-full h-auto rounded-lg object-cover cursor-pointer hover:ring-2 hover:ring-pink-400 transition-all duration-200 border border-pink-100 dark:border-pink-800" loading="lazy">
            <img src="https://picsum.photos/100/80?random=6" alt="Thumb 2" class="w-full h-auto rounded-lg object-cover cursor-pointer hover:ring-2 hover:ring-pink-400 transition-all duration-200 border border-pink-100 dark:border-pink-800" loading="lazy">
            <img src="https://picsum.photos/100/80?random=7" alt="Thumb 3" class="w-full h-auto rounded-lg object-cover cursor-pointer hover:ring-2 hover:ring-pink-400 transition-all duration-200 border border-pink-100 dark:border-pink-800" loading="lazy">
            <img src="https://picsum.photos/100/80?random=8" alt="Thumb 4" class="w-full h-auto rounded-lg object-cover cursor-pointer hover:ring-2 hover:ring-pink-400 transition-all duration-200 border border-pink-100 dark:border-pink-800" loading="lazy">
          </div>
        </div>

        <div class="relative z-10 lg:w-3/5">
          <h2 class="text-3xl sm:text-4xl font-extrabold text-pink-800 dark:text-pink-200 mb-4 leading-snug drop-shadow-sm">Vibrant Abstract Expression Canvas</h2>
          <p class="text-pink-600 dark:text-pink-300 text-lg mb-6 leading-relaxed">An exquisite original oil painting, capturing dynamic brushstrokes and a harmonious blend of sweet, bright colors. Perfect for adding a pop of artistic flair to any space.</p>

          <div class="flex items-baseline mb-6">
            <span class="text-4xl font-extrabold text-pink-700 dark:text-pink-100 mr-4 drop-shadow-md">$499.00</span>
            <span class="text-lg text-pink-500 dark:text-pink-400 line-through">$650.00</span>
            <span class="ml-4 px-3 py-1 bg-green-500 text-white text-sm font-bold rounded-full shadow">30% OFF</span>
          </div>

          <div class="flex items-center mb-6 text-pink-500 dark:text-pink-400">
            <div class="flex">
              <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 20.354l-7.416 3.863 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>
              <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 20.354l-7.416 3.863 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>
              <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 20.354l-7.416 3.863 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>
              <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 20.354l-7.416 3.863 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>
              <svg class="w-6 h-6 fill-current text-current opacity-50" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 20.354l-7.416 3.863 1.48-8.279L.332 9.306l8.332-1.151z"/></svg>
            </div>
            <span class="ml-2 text-pink-700 dark:text-pink-300 font-semibold">4.5 (156 Reviews)</span>
          </div>

          <div class="mb-6">
            <p class="text-pink-700 dark:text-pink-300 font-semibold mb-2">Dimensions:</p>
            <div class="flex gap-3">
              <button class="px-4 py-2 rounded-full border border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900 transition-all duration-200 active:ring-2 active:ring-pink-400">24"x36"</button>
              <button class="px-4 py-2 rounded-full border border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900 transition-all duration-200 active:ring-2 active:ring-pink-400 bg-pink-100 dark:bg-pink-900/50">36"x48"</button>
              <button class="px-4 py-2 rounded-full border border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900 transition-all duration-200 active:ring-2 active:ring-pink-400">60"x40"</button>
            </div>
          </div>

          <button class="w-full bg-gradient-to-r from-pink-600 to-purple-600 text-white font-bold py-4 px-8 rounded-full shadow-xl hover:from-pink-700 hover:to-purple-700 focus:outline-none focus:ring-4 focus:ring-pink-400 dark:focus:ring-pink-600 transition-all duration-300 transform hover:scale-105 active:scale-95">
            Add to Canvas <span class="ml-2 text-xl">&rarr;</span>
          </button>

          <div class="mt-8 p-4 bg-pink-50/70 dark:bg-slate-900/50 rounded-2xl border border-pink-200 dark:border-pink-700 shadow-inner">
            <h3 class="text-lg font-bold text-pink-800 dark:text-pink-200 mb-2 flex items-center">
              <svg class="w-5 h-5 mr-2 text-pink-500" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
              Artist Guarantee
            </h3>
            <p class="text-pink-700 dark:text-pink-300 text-sm">Hand-signed, museum-quality finish, and a 30-day satisfaction guarantee. Free shipping on all original artworks.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Section: Cart Elements -->
    <section id="cart-elements" class="mb-16">
      <h2 class="text-3xl sm:text-4xl font-bold text-pink-700 dark:text-pink-300 mb-8 [text-shadow:_0_2px_2px_rgb(0_0_0_/_5%)] border-b-2 border-pink-300/50 pb-2">
        Cart & Checkout Flow
      </h2>

      <div class="bg-white/80 dark:bg-slate-800/80 rounded-3xl p-6 sm:p-8 shadow-xl ring-2 ring-pink-100 dark:ring-pink-900 backdrop-blur-sm relative overflow-hidden flex flex-col lg:flex-row gap-8">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-100/50 to-pink-100/50 dark:from-purple-900/20 dark:to-pink-900/20"></div>
        <div class="relative z-10 lg:w-2/3">
          <h3 class="text-2xl font-bold text-pink-800 dark:text-pink-200 mb-5 pb-3 border-b border-pink-200 dark:border-pink-700">Your Artistic Cart (3 Items)</h3>

          <!-- Cart Item 1 -->
          <div class="flex flex-col sm:flex-row items-center gap-4 py-4 border-b border-pink-100 dark:border-pink-800 last:border-b-0">
            <div class="flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden shadow-md border border-pink-200 dark:border-pink-700">
              <img src="https://picsum.photos/150/150?random=9" alt="Item 1" class="w-full h-full object-cover" loading="lazy">
            </div>
            <div class="flex-grow text-center sm:text-left">
              <h4 class="font-semibold text-pink-800 dark:text-pink-200 text-lg">Dreamy Watercolor Landscape</h4>
              <p class="text-pink-600 dark:text-pink-300 text-sm">Size: 24"x36"</p>
              <p class="text-pink-700 dark:text-pink-100 font-bold mt-1">$120.00</p>
            </div>
            <div class="flex items-center gap-2">
              <button class="w-8 h-8 rounded-full bg-pink-100 dark:bg-pink-700 text-pink-700 dark:text-pink-100 hover:bg-pink-200 dark:hover:bg-pink-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-pink-400"><span class="sr-only">Decrease quantity</span>-</button>
              <input type="text" value="1" class="w-12 text-center bg-transparent border-b border-pink-300 dark:border-pink-600 text-pink-800 dark:text-pink-200 focus:outline-none px-1 py-0.5" aria-label="Quantity">
              <button class="w-8 h-8 rounded-full bg-pink-100 dark:bg-pink-700 text-pink-700 dark:text-pink-100 hover:bg-pink-200 dark:hover:bg-pink-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-pink-400"><span class="sr-only">Increase quantity</span>+</button>
            </div>
            <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200 ml-0 sm:ml-4">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"/></svg>
              <span class="sr-only">Remove item</span>
            </button>
          </div>

          <!-- Cart Item 2 -->
          <div class="flex flex-col sm:flex-row items-center gap-4 py-4 border-b border-pink-100 dark:border-pink-800 last:border-b-0">
            <div class="flex-shrink-0 w-24 h-24 rounded-lg overflow-hidden shadow-md border border-pink-200 dark:border-pink-700">
              <img src="https://picsum.photos/150/150?random=10" alt="Item 2" class="w-full h-full object-cover" loading="lazy">
            </div>
            <div class="flex-grow text-center sm:text-left">
              <h4 class="font-semibold text-pink-800 dark:text-pink-200 text-lg">Abstract Floral Sketchbook</h4>
              <p class="text-pink-600 dark:text-pink-300 text-sm">Bundle: Basic</p>
              <p class="text-pink-700 dark:text-pink-100 font-bold mt-1">$45.00</p>
            </div>
            <div class="flex items-center gap-2">
              <button class="w-8 h-8 rounded-full bg-pink-100 dark:bg-pink-700 text-pink-700 dark:text-pink-100 hover:bg-pink-200 dark:hover:bg-pink-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-pink-400"><span class="sr-only">Decrease quantity</span>-</button>
              <input type="text" value="2" class="w-12 text-center bg-transparent border-b border-pink-300 dark:border-pink-600 text-pink-800 dark:text-pink-200 focus:outline-none px-1 py-0.5" aria-label="Quantity">
              <button class="w-8 h-8 rounded-full bg-pink-100 dark:bg-pink-700 text-pink-700 dark:text-pink-100 hover:bg-pink-200 dark:hover:bg-pink-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-pink-400"><span class="sr-only">Increase quantity</span>+</button>
            </div>
            <button class="text-red-500 dark:text-red-400 hover:text-red-700 dark:hover:text-red-300 transition-colors duration-200 ml-0 sm:ml-4">
              <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm6 0a1 1 0 11-2 0v6a1 1 0 112 0V8z" clip-rule="evenodd"/></svg>
              <span class="sr-only">Remove item</span>
            </button>
          </div>

          <div class="mt-6">
            <label for="promo-code" class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Apply Promo Code:</label>
            <div class="flex">
              <input type="text" id="promo-code" class="flex-grow px-4 py-2 border border-pink-300 dark:border-pink-600 rounded-l-lg bg-pink-50/50 dark:bg-slate-900/50 text-pink-800 dark:text-pink-200 focus:outline-none focus:ring-2 focus:ring-pink-400" placeholder="SWEETART20">
              <button class="bg-gradient-to-r from-pink-500 to-purple-500 text-white font-semibold py-2 px-6 rounded-r-lg shadow hover:from-pink-600 hover:to-purple-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-pink-400">
                Apply
              </button>
            </div>
          </div>

        </div>

        <div class="relative z-10 lg:w-1/3 bg-pink-50/70 dark:bg-slate-900/50 p-6 rounded-2xl shadow-inner border border-pink-200 dark:border-pink-700">
          <h3 class="text-2xl font-bold text-pink-800 dark:text-pink-200 mb-5 pb-3 border-b border-pink-200 dark:border-pink-700">Order Summary</h3>
          <div class="flex justify-between mb-3 text-pink-700 dark:text-pink-300">
            <span>Subtotal:</span>
            <span class="font-medium">$210.00</span>
          </div>
          <div class="flex justify-between mb-3 text-pink-700 dark:text-pink-300">
            <span>Shipping:</span>
            <span class="font-medium text-green-600 dark:text-green-400">FREE</span>
          </div>
          <div class="flex justify-between mb-6 text-pink-700 dark:text-pink-300 border-b border-pink-200 dark:border-pink-700 pb-3">
            <span>Discount:</span>
            <span class="font-medium text-red-500 dark:text-red-400">-$21.00</span>
          </div>
          <div class="flex justify-between items-center mb-8 text-pink-800 dark:text-pink-100">
            <span class="text-xl font-bold">Total:</span>
            <span class="text-3xl font-extrabold">$189.00</span>
          </div>
          <button class="w-full bg-gradient-to-r from-green-500 to-teal-500 text-white font-bold py-4 rounded-full shadow-lg hover:from-green-600 hover:to-teal-600 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700 transform hover:scale-105 active:scale-95">
            Proceed to Checkout
          </button>
          <p class="text-center text-xs text-pink-600 dark:text-pink-400 mt-4">Secure payment via a palette of options.</p>

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

    <!-- Section: Filters & Sorting -->
    <section id="filters-sorting" class="mb-16">
      <h2 class="text-3xl sm:text-4xl font-bold text-pink-700 dark:text-pink-300 mb-8 [text-shadow:_0_2px_2px_rgb(0_0_0_/_5%)] border-b-2 border-pink-300/50 pb-2">
        Art Discovery Tools
      </h2>

      <div class="bg-white/80 dark:bg-slate-800/80 rounded-3xl p-6 sm:p-8 shadow-xl ring-2 ring-pink-100 dark:ring-pink-900 backdrop-blur-sm relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-teal-100/50 to-purple-100/50 dark:from-teal-900/20 dark:to-purple-900/20"></div>
        <div class="relative z-10 flex flex-col md:flex-row md:items-start gap-6 lg:gap-10">

          <!-- Filters Column -->
          <div class="w-full md:w-1/3 lg:w-1/4 flex-shrink-0">
            <h3 class="text-xl font-bold text-pink-800 dark:text-pink-200 mb-4 pb-2 border-b border-pink-200 dark:border-pink-700">Filter by Style</h3>
            <div class="space-y-3">

              <label class="flex items-center text-pink-700 dark:text-pink-300 cursor-pointer">
                <input type="checkbox" class="form-checkbox h-5 w-5 text-pink-600 dark:text-pink-400 rounded focus:ring-pink-500 transition-all duration-200 border-pink-300 dark:border-pink-600">
                <span class="ml-2 text-base">Watercolor</span>
              </label>
              <label class="flex items-center text-pink-700 dark:text-pink-300 cursor-pointer">
                <input type="checkbox" class="form-checkbox h-5 w-5 text-pink-600 dark:text-pink-400 rounded focus:ring-pink-500 transition-all duration-200 border-pink-300 dark:border-pink-600" checked>
                <span class="ml-2 text-base">Abstract</span>
              </label>
              <label class="flex items-center text-pink-700 dark:text-pink-300 cursor-pointer">
                <input type="checkbox" class="form-checkbox h-5 w-5 text-pink-600 dark:text-pink-400 rounded focus:ring-pink-500 transition-all duration-200 border-pink-300 dark:border-pink-600">
                <span class="ml-2 text-base">Figurative</span>
              </label>
              <label class="flex items-center text-pink-700 dark:text-pink-300 cursor-pointer">
                <input type="checkbox" class="form-checkbox h-5 w-5 text-pink-600 dark:text-pink-400 rounded focus:ring-pink-500 transition-all duration-200 border-pink-300 dark:border-pink-600">
                <span class="ml-2 text-base">Impressionist</span>
              </label>
              <label class="flex items-center text-pink-700 dark:text-pink-300 cursor-pointer">
                <input type="checkbox" class="form-checkbox h-5 w-5 text-pink-600 dark:text-pink-400 rounded focus:ring-pink-500 transition-all duration-200 border-pink-300 dark:border-pink-600">
                <span class="ml-2 text-base">Minimalist</span>
              </label>
            </div>

            <h3 class="text-xl font-bold text-pink-800 dark:text-pink-200 mt-8 mb-4 pb-2 border-b border-pink-200 dark:border-pink-700">Price Range</h3>
            <div class="flex items-center gap-3">
              <input type="number" placeholder="Min" class="w-24 px-3 py-2 rounded-lg bg-pink-50/50 dark:bg-slate-900/50 border border-pink-300 dark:border-pink-600 text-pink-800 dark:text-pink-200 focus:outline-none focus:ring-2 focus:ring-pink-400">
              <span class="text-pink-700 dark:text-pink-300">-</span>
              <input type="number" placeholder="Max" class="w-24 px-3 py-2 rounded-lg bg-pink-50/50 dark:bg-slate-900/50 border border-pink-300 dark:border-pink-600 text-pink-800 dark:text-pink-200 focus:outline-none focus:ring-2 focus:ring-pink-400">
            </div>
          </div>

          <!-- Sorting and Search Column -->
          <div class="w-full md:w-2/3 lg:w-3/4">
            <h3 class="text-xl font-bold text-pink-800 dark:text-pink-200 mb-4 pb-2 border-b border-pink-200 dark:border-pink-700">Search & Sort</h3>
            <div class="mb-6">
              <label for="search-components" class="sr-only">Search components</label>
              <div class="relative">
                <input type="text" id="search-components" placeholder="Search for an artistic component..." class="w-full px-5 py-3 pr-12 rounded-full border border-pink-300 dark:border-pink-600 bg-pink-50/50 dark:bg-slate-900/50 text-pink-800 dark:text-pink-200 placeholder-pink-400 dark:placeholder-pink-500 focus:outline-none focus:ring-2 focus:ring-pink-400 shadow-sm">
                <button class="absolute right-3 top-1/2 -translate-y-1/2 text-pink-600 dark:text-pink-400 hover:text-pink-800 dark:hover:text-pink-200 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-pink-300 rounded-full p-1">
                  <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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                  <span class="sr-only">Search</span>
                </button>
              </div>
            </div>

            <div class="mb-6">
              <label for="sort-by" class="block text-sm font-medium text-pink-700 dark:text-pink-300 mb-2">Sort by:</label>
              <div class="relative group">
                <select id="sort-by" class="block w-full px-4 py-3 rounded-xl bg-pink-50/50 dark:bg-slate-900/50 border border-pink-300 dark:border-pink-600 text-pink-800 dark:text-pink-200 appearance-none focus:outline-none focus:ring-2 focus:ring-pink-400 transition-all duration-200 pr-10 shadow-sm">
                  <option value="featured">Featured (Default)</option>
                  <option value="latest">Newest Arrivals</option>
                  <option value="price-asc">Price: Low to High</option>
                  <option value="price-desc">Price: High to Low</option>
                  <option value="reviews">Average Customer Review</option>
                </select>
                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-pink-600 dark:text-pink-400 transition-transform duration-200 group-focus-within:rotate-180">
                  <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                </div>
              </div>
            </div>

            <div>
              <p class="text-pink-700 dark:text-pink-300 text-sm mb-2">Viewing 1-12 of 85 Artworks.</p>
              <div class="flex justify-center flex-wrap gap-2">
                <button class="px-4 py-2 rounded-full border border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900 transition-all duration-200 active:ring-2 active:ring-pink-400 bg-pink-100 dark:bg-pink-900/50">1</button>
                <button class="px-4 py-2 rounded-full border border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900 transition-all duration-200 active:ring-2 active:ring-pink-400">2</button>
                <button class="px-4 py-2 rounded-full border border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900 transition-all duration-200 active:ring-2 active:ring-pink-400">3</button>
                <span class="px-4 py-2 text-pink-700 dark:text-pink-300">...</span>
                <button class="px-4 py-2 rounded-full border border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900 transition-all duration-200 active:ring-2 active:ring-pink-400">10</button>
                <button class="px-4 py-2 rounded-full border border-pink-300 dark:border-pink-600 text-pink-700 dark:text-pink-300 hover:bg-pink-100 dark:hover:bg-pink-900 transition-all duration-200 active:ring-2 active:ring-pink-400">Next &rarr;</button>
              </div>
            </div>

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

    <!-- Testimonial / Community Section -->
    <section class="text-center py-12 mb-8">
      <h2 class="text-3xl sm:text-4xl font-bold text-pink-700 dark:text-pink-300 mb-8 [text-shadow:_0_2px_2px_rgb(0_0_0_/_5%)]">
        What Our Artists Say
      </h2>
      <div class="max-w-2xl mx-auto bg-green-50/70 dark:bg-slate-900/50 rounded-3xl p-6 sm:p-8 shadow-xl ring-2 ring-green-100 dark:ring-green-900 backdrop-blur-sm relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-pink-100/30 to-purple-100/30 dark:from-pink-900/10 dark:to-purple-900/10"></div>
        <div class="relative z-10">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Artist Avatar" class="w-24 h-24 rounded-full mx-auto mb-6 border-4 border-pink-300 dark:border-pink-600 shadow-md transition-all duration-300 hover:scale-105">
          <p class="text-lg sm:text-xl italic text-pink-800 dark:text-pink-200 leading-relaxed mb-6">
            "This wiki is a masterpiece! The components are not just functional, they are truly inspiring. It makes building beautiful e-commerce sites feel like painting on a fresh canvas."
          </p>
          <p class="font-bold text-pink-700 dark:text-pink-300 text-lg">Anya Petrova</p>
          <p class="text-pink-600 dark:text-pink-400 text-sm">Digital Canvas Artist</p>
        </div>
      </div>
    </section>

    <!-- Footer -->
    <footer class="text-center text-pink-700 dark:text-pink-300 py-8 border-t border-pink-200 dark:border-pink-800 mt-12">
      <p>&copy; 2023 Artistic E-commerce Wiki. All rights reserved. Crafted with <span class="text-red-500">&hearts;</span></p>
      <div class="flex justify-center gap-4 mt-4 text-pink-500 dark:text-pink-400">
        <a href="#" class="hover:text-pink-700 dark:hover:text-pink-200 transition-colors duration-200">Privacy Policy</a>
        <a href="#" class="hover:text-pink-700 dark:hover:text-pink-200 transition-colors duration-200">Terms of Service</a>
        <a href="#" class="hover:text-pink-700 dark:hover:text-pink-200 transition-colors duration-200">Contact Us</a>
      </div>
    </footer>

  </div>
</div>

<style>
  /* Custom animations for the watercolor blob effect */
  @keyframes blob {
    0% { transform: scale(1) translate(0px, 0px); }
    33% { transform: scale(1.1) translate(30px, -50px); }
    66% { transform: scale(0.9) translate(-20px, 20px); }
    100% { transform: scale(1) translate(0px, 0px); }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
  .animation-delay-2000 {
    animation-delay: 2s;
  }
  .animation-delay-4000 {
    animation-delay: 4s;
  }
  
  /* Hide scrollbar for nav, but keep scrollability */
  .scrollbar-hide {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
  }
</style>

Industrial_Monochrome_Blog_Card

Une carte de consommation de blog/contenu complexe et réactive à l’esthétique industrielle, utilisant une palette de couleurs noir/blanc avec un seul accent vif. Comprend des éléments exposés et un design utilitaire, avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="max-w-4xl w-full bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700
              flex flex-col md:flex-row">

    <!-- Image Section -->
    <div class="md:w-1/2 overflow-hidden flex-shrink-0">
      <img class="w-full h-64 sm:h-72 md:h-full object-cover object-center transform hover:scale-105 transition duration-500 ease-in-out"
           src="https://picsum.photos/seed/industrial-blog/800/600" alt="Industrial Blog Post Image">
    </div>

    <!-- Content Section -->
    <div class="md:w-1/2 p-6 sm:p-8 lg:p-10 flex flex-col justify-between">
      <div>
        <!-- Category & Date -->
        <div class="mb-3 flex items-center space-x-3 text-sm">
          <span class="px-3 py-1 rounded-full text-white bg-red-600 dark:bg-red-500 font-medium tracking-wide uppercase text-xs">
            Design
          </span>
          <span class="text-gray-600 dark:text-gray-400">• March 15, 2024</span>
        </div>

        <!-- Title -->
        <h1 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white leading-tight mb-4">
          The Raw Beauty of Industrial Design Principles
        </h1>

        <!-- Excerpt -->
        <p class="text-gray-700 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-6">
          Explore how utilitarian aesthetics and exposed materials shape the future of modern architecture and product design, embracing honesty in construction.
        </p>

        <!-- Tags -->
        <div class="flex flex-wrap gap-2 mb-6">
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg">#Architecture</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg">#Minimalism</span>
          <span class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg">#Materials</span>
        </div>
      </div>

      <!-- Author and Read More -->
      <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700 flex flex-col sm:flex-row items-start sm:items-center justify-between">
        <div class="flex items-center mb-4 sm:mb-0">
          <img class="w-10 h-10 rounded-full object-cover mr-3 border-2 border-red-600 dark:border-red-500"
               src="https://randomuser.me/api/portraits/women/68.jpg" alt="Author Avatar">
          <div>
            <p class="font-semibold text-gray-900 dark:text-white">Jane Doe</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Lead Designer</p>
          </div>
        </div>

        <a href="#" class="inline-flex items-center text-red-600 dark:text-red-500 hover:text-red-800 dark:hover:text-red-300 
                          font-medium transition-colors duration-200 text-base sm:text-lg group">
          Read Article
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-2 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-200"
               viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

  </div>
</div>

Fiche produit e-commerce pour l’agriculture

Un composant de fiche produit ludique et joyeux pour les sites e-commerce agricole, avec des éléments arrondis, des tons océan/bleu, un design réactif et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 md:p-8 bg-gradient-to-br from-blue-50 to-sky-100 dark:from-gray-800 dark:to-gray-950 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg mx-auto bg-white dark:bg-gray-850 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-4 border-blue-200 dark:border-blue-800">
    <div class="relative">
      <img class="w-full h-48 sm:h-56 md:h-64 object-cover object-center rounded-t-2xl" src="https://picsum.photos/600/400?random=1&seed=farming" alt="Fresh Organic Produce">
      <div class="absolute top-3 left-3 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md transform -rotate-3">Grows Fast!</div>
      <div class="absolute top-3 right-3 bg-green-400 text-white text-xs font-bold px-3 py-1 rounded-full shadow-md transform rotate-3">Fresh Pick</div>
    </div>
    <div class="p-5 sm:p-6 md:p-7 space-y-4">
      <h3 class="text-xl sm:text-2xl font-extrabold text-blue-800 dark:text-blue-200 leading-tight">Organic Heirloom Tomatoes</h3>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 leading-relaxed">Cultivated with love and care, these juicy heirloom tomatoes are perfect for your summer salads and sauces.</p>
      <div class="flex items-center justify-between mt-4">
        <span class="text-2xl sm:text-3xl font-extrabold text-green-600 dark:text-green-400">$5.99</span>
        <span class="text-lg text-gray-500 line-through dark:text-gray-600">$7.50</span>
      </div>
      <div class="flex items-center text-yellow-500 mt-2">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.725c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
        <span class="text-sm ml-1 text-gray-500 dark:text-gray-400">(4.5)</span>
      </div>
      <button type="button" class="w-full py-3 sm:py-4 px-6 mt-4 bg-blue-600 hover:bg-blue-700 active:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-900 text-white font-bold rounded-full shadow-lg text-lg sm:text-xl transform transition-transform duration-200 hover:scale-[1.03] flex items-center justify-center space-x-2">
        <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="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <span>Add to Basket</span>
      </button>
      <div class="flex items-center mt-5 p-3 bg-blue-50 dark:bg-gray-800 rounded-xl">
        <img class="w-10 h-10 rounded-full object-cover mr-3 border-2 border-blue-300 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Farmer John">
        <div>
          <p class="font-semibold text-blue-800 dark:text-blue-300">Harvested by Farmer John</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">Local & Sustainable</p>
        </div>
      </div>
    </div>
  </div>
</div>

Forum_Community_Component

Un forum / discussion communautaire réactif et thématique avec un style de design d’entreprise / professionnel et une palette de couleurs océan/bleu, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

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

  <!-- Component Header -->
  <div class="max-w-7xl mx-auto mb-8">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-2">Community Discussions</h1>
    <p class="text-lg text-blue-700 dark:text-blue-300">Engage with our professionals, share insights, and get support.</p>
  </div>

  <!-- Main Content Area - Grid Layout for Topics/Posts -->
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

    <!-- Left Column: Forum Categories/Topics -->
    <div class="md:col-span-2 space-y-6">

      <!-- Search and Filter Bar -->
      <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm flex flex-col sm:flex-row items-center gap-4">
        <input type="text" placeholder="Search discussions..." class="flex-grow p-2 border border-blue-200 dark:border-gray-700 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-blue-50 dark:bg-gray-700 text-blue-900 dark:text-white placeholder-blue-400 dark:placeholder-gray-500">
        <select class="p-2 border border-blue-200 dark:border-gray-700 rounded-md bg-blue-50 dark:bg-gray-700 text-blue-900 dark:text-white">
          <option>All Categories</option>
          <option>Product Feedback</option>
          <option>Technical Support</option>
          <option>General Discussion</option>
          <option>Announcements</option>
        </select>
        <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out flex-shrink-0">
          New Topic
        </button>
      </div>

      <!-- Discussion Post Card (Repeated for multiple posts) -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden animate-fade-in">
        <div class="p-4 sm:p-6 border-b border-blue-100 dark:border-gray-700">
          <div class="flex items-center mb-2">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
            <div>
              <a href="#" class="font-semibold text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-300">John Doe</a>
              <span class="text-sm text-gray-500 dark:text-gray-400 block">Posted on April 15, 2024</span>
            </div>
          </div>
          <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">How to best integrate analytics with our new CRM?</h2>
          <p class="text-blue-700 dark:text-blue-300 line-clamp-3">We're looking for the most efficient way to connect Google Analytics and our in-house CRM system to get a unified view of customer data. Any recommended tools or best practices?</p>
          <div class="mt-4 flex items-center justify-between">
            <div class="flex space-x-4 text-gray-600 dark:text-gray-400 text-sm">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4-1l-3 1 1-3A8.84 8.84 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0zm-7 4a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0z" clip="evenodd"></path></svg>56 Replies</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 11l4.293-4.293a1 1 0 00-1.414-1.414L10 9.586 5.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 101.414 1.414L10 12.586z"></path></svg>Category: CRM</span>
            </div>
            <a href="#" class="px-3 py-1 bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium rounded-full cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors">View Discussion</a>
          </div>
        </div>
      </div>

      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden animate-fade-in">
        <div class="p-4 sm:p-6 border-b border-blue-100 dark:border-gray-700">
          <div class="flex items-center mb-2">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar">
            <div>
              <a href="#" class="font-semibold text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-300">Jane Doe</a>
              <span class="text-sm text-gray-500 dark:text-gray-400 block">Posted on April 14, 2024</span>
            </div>
          </div>
          <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Seeking advice on enhancing team collaboration with new tools.</h2>
          <p class="text-blue-700 dark:text-blue-300 line-clamp-3">Our team is growing, and we're looking for innovative tools or strategies to improve our daily collaboration and project management. Any suggestions beyond the usual suspects?</p>
          <div class="mt-4 flex items-center justify-between">
            <div class="flex space-x-4 text-gray-600 dark:text-gray-400 text-sm">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4-1l-3 1 1-3A8.84 8.84 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0zm-7 4a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0z" clip="evenodd"></path></svg>32 Replies</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 11l4.293-4.293a1 1 0 00-1.414-1.414L10 9.586 5.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 101.414 1.414L10 12.586z"></path></svg>Category: Productivity</span>
            </div>
            <a href="#" class="px-3 py-1 bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium rounded-full cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors">View Discussion</a>
          </div>
        </div>
      </div>

       <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden animate-fade-in">
        <div class="p-4 sm:p-6 border-b border-blue-100 dark:border-gray-700">
          <div class="flex items-center mb-2">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Avatar">
            <div>
              <a href="#" class="font-semibold text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-300">Michael Scott</a>
              <span class="text-sm text-gray-500 dark:text-gray-400 block">Posted on April 13, 2024</span>
            </div>
          </div>
          <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Best practices for secure cloud deployments?</h2>
          <p class="text-blue-700 dark:text-blue-300 line-clamp-3">Looking for advice on maintaining robust security for our cloud infrastructure. What are the essential guidelines and tools for a corporate environment?</p>
          <div class="mt-4 flex items-center justify-between">
            <div class="flex space-x-4 text-gray-600 dark:text-gray-400 text-sm">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4-1l-3 1 1-3A8.84 8.84 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0zm-7 4a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0z" clip="evenodd"></path></svg>78 Replies</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 11l4.293-4.293a1 1 0 00-1.414-1.414L10 9.586 5.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 101.414 1.414L10 12.586z"></path></svg>Category: Cloud Security</span>
            </div>
            <a href="#" class="px-3 py-1 bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium rounded-full cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors">View Discussion</a>
          </div>
        </div>
      </div>

    </div>

    <!-- Right Column: Sidebar (Popular Topics, Recent Activity etc.) -->
    <div class="space-y-6">

      <!-- Popular Topics -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 sm:p-6">
        <h3 class="text-lg font-bold text-blue-900 dark:text-blue-100 mb-4">Popular Topics</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block font-medium">Future of AI in Business Operations</a></li>
          <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block">Optimizing Remote Workflows</a></li>
          <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block">Cybersecurity Threats 2024 Report</a></li>
          <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block">Sustainable Business Practices</a></li>
        </ul>
      </div>

      <!-- Recent Activity -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 sm:p-6">
        <h3 class="text-lg font-bold text-blue-900 dark:text-blue-100 mb-4">Recent Activity</h3>
        <ul class="space-y-3">
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <div>
              <p class="text-sm text-blue-700 dark:text-blue-300"><span class="font-semibold">Sarah L.</span> replied to "Challenges in Hybrid Cloud Adoption"</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">5 minutes ago</span>
            </div>
          </li>
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div>
              <p class="text-sm text-blue-700 dark:text-blue-300"><span class="font-semibold">David K.</span> started "Best Practices for Q2 Planning"</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</span>
            </div>
          </li>
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/7.jpg" alt="Avatar">
            <div>
              <p class="text-sm text-blue-700 dark:text-blue-300"><span class="font-semibold">Emily R.</span> voted on "Effective Communication Strategies"</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">3 hours ago</span>
            </div>
          </li>
        </ul>
      </div>

      <!-- Pinned Announcements -->
      <div class="bg-blue-600 dark:bg-blue-900 text-white dark:text-blue-100 rounded-lg shadow-md p-4 sm:p-6">
        <h3 class="text-lg font-bold mb-3">📢 Important Announcement</h3>
        <p class="text-sm opacity-90">Our annual system maintenance will occur on May 1st from 2 AM to 6 AM UTC. Expect brief service interruptions. Thank you for your understanding.</p>
        <a href="#" class="mt-3 inline-block bg-blue-700 dark:bg-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 text-white text-xs font-semibold px-3 py-1 rounded-full transition duration-300">Read More</a>
      </div>

    </div>

  </div>

  <!-- Pagination (Example) -->
  <div class="max-w-7xl mx-auto mt-8 flex justify-center">
    <nav class="relative z-0 inline-flex shadow-sm -space-x-px" aria-label="Pagination">
      <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        <span class="sr-only">Previous</span>
        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip="evenodd" />
        </svg>
      </a>
      <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors z-10">
        1
      </a>
      <a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        2
      </a>
      <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        3
      </a>
      <span class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-400">
        ...
      </span>
      <a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        10
      </a>
      <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        <span class="sr-only">Next</span>
        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip="evenodd" />
        </svg>
      </a>
    </nav>
  </div>

</div>

Fiche produit e-commerce Neumorphic

Un composant de carte produit e-commerce de style soft UI (Neumorphism) avec des couleurs en niveaux de gris, conçu pour les sites Web d’entreprise. Il comporte une image de produit, un titre, un prix et un bouton « Ajouter au panier », entièrement réactif et avec prise en charge du mode sombre.

Ouvrir Aperçu

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

  <!-- Product Card Container -->
  <div class="max-w-xs w-full rounded-2xl p-6 shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-100 dark:bg-gray-800 transition-all duration-300 ease-in-out">

    <!-- Product Image -->
    <div class="relative w-full h-48 rounded-xl overflow-hidden mb-6 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark flex items-center justify-center">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="absolute inset-0 w-full h-full object-cover rounded-xl transition-transform duration-300 hover:scale-105">
    </div>

    <!-- Product Details -->
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 transition-colors duration-300">
      Sleek Wireless Headphones
    </h3>
    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 transition-colors duration-300 line-clamp-2">
      Experience immersive sound with active noise cancellation and comfortable earcups.
    </p>

    <div class="flex items-end justify-between mb-6">
      <span class="text-2xl font-bold text-gray-900 dark:text-gray-50 transition-colors duration-300">
        $199.99
      </span>
      <!-- Star Rating Placeholder -->
      <div class="flex space-x-1 text-gray-400 dark:text-gray-600">
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
      </div>
    </div>

    <!-- Add to Cart Button -->
    <button class="w-full py-3 rounded-xl font-medium text-lg text-gray-800 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark hover:text-gray-900 hover:dark:text-white transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 active:shadow-neumorphic-light-inset active:dark:shadow-neumorphic-dark-inset">
      Add to Cart
    </button>

  </div>

  <!-- Custom Styles for Neumorphism Shadows (can be added to a global CSS file or <style> tag) -->
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #2c2c2c;
    }
    .shadow-neumorphic-light-inset {
      box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark-inset {
      box-shadow: inset 6px 6px 12px #1c1c1c, inset -6px -6px 12px #2c2c2c;
    }
    .shadow-inner-neumorphic-light {
      box-shadow: inset 2px 2px 5px #bebebe, inset -2px -2px 5px #ffffff;
    }
    .dark .shadow-inner-neumorphic-dark {
      box-shadow: inset 2px 2px 5px #1c1c1c, inset -2px -2px 5px #2c2c2c;
    }
  </style>
</div>

Composant de tableau de bord e-commerce

Un composant simple de tableau de bord de commerce électronique avec un design brutaliste et dynamique, avec une mise en page réactive et une prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-neutral-100 dark:bg-zinc-900 p-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1: Sales Overview -->
    <div class="bg-fuchsia-500 dark:bg-fuchsia-800 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Sales</h2>
      <p class="text-5xl font-black text-black dark:text-white mb-2">$12,345</p>
      <p class="text-lg text-black dark:text-white">+8% from last month</p>
    </div>

    <!-- Card 2: New Orders -->
    <div class="bg-lime-400 dark:bg-lime-700 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-100">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Orders</h2>
      <p class="text-5xl font-black text-black dark:text-white mb-2">2,100</p>
      <p class="text-lg text-black dark:text-white">+15% from last month</p>
    </div>

    <!-- Card 3: Top Product -->
    <div class="bg-yellow-300 dark:bg-yellow-600 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-200">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Top Product</h2>
      <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/seed/product1/80/80" alt="Product Image" class="w-20 h-20 object-cover border-2 border-black dark:border-white">
        <div>
          <p class="text-xl font-bold text-black dark:text-white">Radical Widget X</p>
          <p class="text-lg text-black dark:text-white">$79.99</p>
        </div>
      </div>
    </div>

    <!-- Card 4: Customer Satisfaction -->
    <div class="bg-blue-400 dark:bg-blue-700 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-300">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Satisfaction</h2>
      <p class="text-5xl font-black text-black dark:text-white">92%</p>
      <p class="text-lg text-black dark:text-white">Up from 88%</p>
    </div>

    <!-- Card 5: New Customers -->
    <div class="bg-red-400 dark:bg-red-700 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-400">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">New Customers</h2>
      <p class="text-5xl font-black text-black dark:text-white">350</p>
      <p class="text-lg text-black dark:text-white">Monthly acquisition</p>
    </div>

    <!-- Card 6: Recent Activity (simplified) -->
    <div class="bg-purple-400 dark:bg-purple-700 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-500">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Activity</h2>
      <ul class="space-y-3">
        <li class="flex items-center text-black dark:text-white">
          <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-black dark:border-white">
          <p class="text-lg">New order from John D.</p>
        </li>
        <li class="flex items-center text-black dark:text-white">
          <img src="https://randomuser.me/api/portraits/thumb/women/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-black dark:border-white">
          <p class="text-lg">Product restock alert</p>
        </li>
      </ul>
    </div>

  </div>
</div>

<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
  }
  .animation-delay-100 { animation-delay: 0.1s; }
  .animation-delay-200 { animation-delay: 0.2s; }
  .animation-delay-300 { animation-delay: 0.3s; }
  .animation-delay-400 { animation-delay: 0.4s; }
  .animation-delay-500 { animation-delay: 0.5s; }
</style>

Composant Composants de commerce électronique

Un composant e-commerce brutaliste pour un blog, caractérisé par une palette de couleurs vives et une complexité modérée. Il comprend un design réactif avec prise en charge du thème sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

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

  <!-- Product Card -->
  <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 mb-8 max-w-sm w-full shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_white]">
    <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
    <h3 class="text-2xl font-bold text-black dark:text-white mb-2">Disruptor X1</h3>
    <p class="text-black dark:text-white mb-4">Unleash the power of raw computing. This machine doesn't just run; it detonates.</p>
    <div class="flex justify-between items-center mb-4">
      <span class="text-3xl font-bold text-red-600 dark:text-red-400">$999.99</span>
      <button class="bg-yellow-400 text-black dark:bg-yellow-600 dark:text-white border-4 border-black dark:border-white px-6 py-3 font-bold text-lg hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">BUY NOW</button>
    </div>
  </div>

  <!-- Another Product Card -->
  <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 mb-8 max-w-sm w-full shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_white]">
    <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
    <h3 class="text-2xl font-bold text-black dark:text-white mb-2">Axiom Z2</h3>
    <p class="text-black dark:text-white mb-4">Experience sound like never before. Pure, unadulterated audio assault.</p>
    <div class="flex justify-between items-center mb-4">
      <span class="text-3xl font-bold text-green-600 dark:text-green-400">$249.99</span>
      <button class="bg-yellow-400 text-black dark:bg-yellow-600 dark:text-white border-4 border-black dark:border-white px-6 py-3 font-bold text-lg hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">GRAB IT</button>
    </div>
  </div>

  <!-- Blog Post Snippet (acting as related content/upsell) -->
  <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 max-w-lg w-full shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_white]">
    <h4 class="text-xl font-bold text-black dark:text-white mb-3">READ: The Philosophy of Brutalist Tech</h4>
    <img src="https://picsum.photos/400/200?random=3" alt="Blog Post Image" class="w-full h-32 object-cover border-4 border-black dark:border-white mb-4">
    <p class="text-black dark:text-white text-sm mb-4">Dive deep into the design principles that make our products unapologetically bold and functional.</p>
    <a href="#" class="text-blue-700 dark:text-blue-300 underline font-bold hover:text-blue-900 dark:hover:text-blue-500">Continue Reading &rarr;</a>

    <div class="mt-6 pt-4 border-t-2 border-black dark:border-white flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-12 h-12 rounded-full border-2 border-black dark:border-white mr-4">
      <div>
        <p class="font-bold text-black dark:text-white">J.D. Brutal</p>
        <p class="text-sm text-gray-700 dark:text-gray-300">Tech Alchemist</p>
      </div>
    </div>
  </div>

  <!-- Responsive Adjustments -->
  <div class="mt-8 text-center text-gray-700 dark:text-gray-300 text-sm">
    <p>Resize your browser to see responsiveness!</p>
    <p>Dark mode toggles automatically based on system preference.</p>
  </div>

</div>