Tous les composants

Parcourir tous les composants CSS Tailwind disponibles

Composant de la liste de souhaits

Un composant de liste de souhaits complexe et réactif avec un design rétro/vintage, une palette de couleurs de terre et une prise en charge du mode sombre, adapté à un blog ou à un site de contenu.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-stone-100 text-stone-800 dark:bg-stone-900 dark:text-stone-200 transition-colors duration-300 p-4 sm:p-6 md:p-8">
  <div class="max-w-6xl mx-auto bg-amber-50 rounded-lg shadow-xl overflow-hidden dark:bg-stone-800 border border-stone-300 dark:border-stone-700 relative">
    <!-- Retro TV Bezel Effect -->
    <div class="absolute inset-0 border-[1.5rem] border-solid border-stone-400 dark:border-stone-950 rounded-lg pointer-events-none z-10 flex items-center justify-center">
      <div class="absolute inset-0 border-stone-600 dark:border-stone-700 border-[0.5rem] rounded-lg"></div>
      <span class="absolute top-2 left-2 text-sm text-stone-700 dark:text-stone-300 font-mono">VOL</span>
      <span class="absolute top-2 right-2 text-sm text-stone-700 dark:text-stone-300 font-mono">CH</span>
      <div class="absolute bottom-4 right-4 w-6 h-6 bg-stone-600 rounded-full shadow-md dark:bg-stone-700"></div>
      <div class="absolute bottom-4 left-4 w-6 h-6 bg-stone-600 rounded-full shadow-md dark:bg-stone-700"></div>
      <div class="absolute top-6 right-6 w-3 h-3 bg-red-600 rounded-full animate-pulse"></div>
    </div>

    <div class="relative z-20 p-4 sm:p-6 lg:p-8">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-center text-orange-800 dark:text-orange-400 mb-6 font-serif">Your Wishlist</h2>
      <p class="text-center text-sm mb-8 text-stone-700 dark:text-stone-300 font-mono">Saved items for later enjoyment.</p>

      <!-- Sort and Filter Controls -->
      <div class="flex flex-col sm:flex-row justify-between items-center mb-8 bg-stone-200/50 dark:bg-stone-700/50 rounded-md p-3 sm:p-4 border border-stone-300 dark:border-stone-600">
        <div class="w-full sm:w-auto mb-4 sm:mb-0">
          <label for="sort-by" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1"><span class="font-bold">Sort By:</span></label>
          <select id="sort-by" class="mt-1 block w-full rounded-md border-stone-300 dark:border-stone-600 shadow-sm focus:border-orange-500 focus:ring-orange-500 bg-white dark:bg-stone-900 text-stone-800 dark:text-stone-200 py-2 pl-3 pr-10 text-base sm:text-sm">
            <option>Date Added (Newest)</option>
            <option>Date Added (Oldest)</option>
            <option>Price (Low to High)</option>
            <option>Price (High to Low)</option>
            <option>Alphabetical (A-Z)</option>
          </select>
        </div>
        <div class="w-full sm:w-auto">
          <label for="filter-category" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-1"><span class="font-bold">Filter By Category:</span></label>
          <select id="filter-category" class="mt-1 block w-full rounded-md border-stone-300 dark:border-stone-600 shadow-sm focus:border-orange-500 focus:ring-orange-500 bg-white dark:bg-stone-900 text-stone-800 dark:text-stone-200 py-2 pl-3 pr-10 text-base sm:text-sm">
            <option>All</option>
            <option>Books</option>
            <option>Gadgets</option>
            <option>Home Decor</option>
            <option>Fashion</option>
          </select>
        </div>
      </div>

      <!-- Wishlist Items Grid -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

        <!-- Wishlist Item 1 -->
        <div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1018/400/300" alt="Old Camera">
          <div class="p-4 flex flex-col flex-grow">
            <h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">Vintage Film Camera</h3>
            <p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">A rare beauty from the 70s, perfect for collectors.</p>
            <div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
              <span class="font-bold text-base mr-2 text-green-700 dark:text-green-400">$299.99</span>
              <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">In Stock</span>
            </div>
            <div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
              <button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
                Remove
              </button>
              <button class="px-4 py-2 bg-orange-600 text-white text-sm font-semibold rounded-md shadow-md hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
                Add to Cart
              </button>
            </div>
          </div>
        </div>

        <!-- Wishlist Item 2 -->
        <div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/id/104/400/300" alt="Old Typewriter">
          <div class="p-4 flex flex-col flex-grow">
            <h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">Antique Typewriter</h3>
            <p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">Functional and beautiful, a piece of literary history.</p>
            <div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
              <span class="font-bold text-base mr-2 text-green-700 dark:text-green-400">$189.00</span>
              <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">In Stock</span>
            </div>
            <div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
              <button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
                Remove
              </button>
              <button class="px-4 py-2 bg-orange-600 text-white text-sm font-semibold rounded-md shadow-md hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
                Add to Cart
              </button>
            </div>
          </div>
        </div>

        <!-- Wishlist Item 3 (Out of Stock) -->
        <div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col opacity-70">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/id/338/400/300" alt="Record Player">
          <div class="p-4 flex flex-col flex-grow">
            <h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">Classic Vinyl Player</h3>
            <p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">Spin your favorite tunes on this retro-style player.</p>
            <div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
              <span class="font-bold text-base mr-2 text-gray-700 dark:text-gray-400">$120.50</span>
              <span class="bg-red-100 text-red-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300">Out of Stock</span>
            </div>
            <div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
              <button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200 cursor-not-allowed">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
                Remove
              </button>
              <button disabled class="px-4 py-2 bg-gray-400 text-white text-sm font-semibold rounded-md shadow-md cursor-not-allowed dark:bg-gray-600">
                Out of Stock
              </button>
            </div>
          </div>
        </div>

        <!-- Wishlist Item 4 -->
        <div class="bg-white dark:bg-stone-700 rounded-lg shadow-lg overflow-hidden border border-stone-200 dark:border-stone-600 flex flex-col">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/id/37/400/300" alt="Old Book">
          <div class="p-4 flex flex-col flex-grow">
            <h3 class="text-xl font-bold text-orange-800 dark:text-orange-300 mb-2 font-serif">First Edition Novel</h3>
            <p class="text-sm text-stone-600 dark:text-stone-300 mb-3 font-mono">A must-read classic in pristine condition.</p>
            <div class="flex items-center text-stone-800 dark:text-stone-200 text-sm mb-3">
              <span class="font-bold text-base mr-2 text-green-700 dark:text-green-400">$45.00</span>
              <span class="bg-green-100 text-green-800 text-xs font-semibold px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">In Stock</span>
            </div>
            <div class="flex justify-between items-center mt-auto pt-3 border-t border-stone-200 dark:border-stone-600">
              <button class="flex items-center text-sm font-medium text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 transition-colors duration-200">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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"></path></svg>
                Remove
              </button>
              <button class="px-4 py-2 bg-orange-600 text-white text-sm font-semibold rounded-md shadow-md hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
                Add to Cart
              </button>
            </div>
          </div>
        </div>

      </div>

      <!-- Call to Action / Explore More -->
      <div class="text-center mt-10">
        <p class="text-stone-700 dark:text-stone-300 mb-4 font-mono">Looking for more vintage finds?</p>
        <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-stone-800">
          Explore Catalog
          <svg class="ml-3 -mr-1 h-5 w-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </button>
      </div>

      <!-- User Profile Thumbnail -->
      <div class="absolute top-6 left-6 flex items-center bg-brown-600 dark:bg-brown-800 text-amber-50 rounded-full px-4 py-2 shadow-lg hidden md:flex font-mono">
        <img class="w-8 h-8 rounded-full mr-2 border-2 border-amber-300 dark:border-amber-600" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
        <span class="text-sm">User's List</span>
      </div>

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

3D_Grayscale_Infographics_Component

Un composant d’infographie en niveaux de gris réactif, inspiré de la 3D, pour la consommation de blogs/contenus, avec de la profondeur et de l’engagement. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <section class="py-12 sm:py-16 lg:py-20 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-center text-4xl sm:text-5xl lg:text-6xl font-extrabold text-gray-800 dark:text-gray-100 mb-12 sm:mb-16 tracking-tight leading-tight">
      <span class="relative inline-block">
        Key Insights
        <span class="block absolute -inset-1 -skew-y-3 bg-gray-300 dark:bg-gray-700"></span>
        <span class="relative text-gray-900 dark:text-gray-50">Unveiled</span>
      </span>
    </h2>

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

      <!-- Infographic Card 1 -->
      <div class="relative group perspective-1000">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform-style-3d group-hover:rotate-y-6 group-hover:scale-105 transition-all duration-500 ease-in-out border border-gray-200 dark:border-gray-700 p-6 flex flex-col items-center text-center relative z-10">
          <div class="absolute inset-0 bg-gradient-to-br from-gray-50 to-white dark:from-gray-950 dark:to-gray-850 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl"></div>
          <div class="relative z-20 flex flex-col items-center p-4">
            <div class="flex items-center justify-center w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gray-200 dark:bg-gray-700 mb-6 shadow-inner-xl transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              <svg class="w-10 h-10 sm:w-12 sm:h-12 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1.25-3M15 17l.5 3L16 17m-6-10V4a1 1 0 011-1h2a1 1 0 011 1v3M9 16h6M8 8h8M5 12h14a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2z"></path></svg>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-4 transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              85% Growth
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg leading-relaxed transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              Our innovative strategies led to a significant 85% increase in market share over the last quarter.
            </p>
          </div>
        </div>
        <div class="absolute -bottom-4 right-4 w-4/5 h-4 bg-gray-300 dark:bg-gray-700 rounded-full blur-sm opacity-50 group-hover:opacity-75 transition-opacity duration-500 transform -translate-x-1/2 -rotate-3"></div>
      </div>

      <!-- Infographic Card 2 -->
      <div class="relative group perspective-1000">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform-style-3d group-hover:-rotate-y-6 group-hover:scale-105 transition-all duration-500 ease-in-out border border-gray-200 dark:border-gray-700 p-6 flex flex-col items-center text-center relative z-10">
          <div class="absolute inset-0 bg-gradient-to-br from-gray-50 to-white dark:from-gray-950 dark:to-gray-850 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl"></div>
          <div class="relative z-20 flex flex-col items-center p-4">
            <div class="flex items-center justify-center w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gray-200 dark:bg-gray-700 mb-6 shadow-inner-xl transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              <svg class="w-10 h-10 sm:w-12 sm:h-12 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 12l3-3m0 0l3 3m-3-3v8a7 7 0 0014 0v-.5M10 12l-3 3m0 0l-3-3m3 3V4a7 7 0 00-14 0v.5"></path></svg>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-4 transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              20% Efficiency
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg leading-relaxed transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              Optimized workflows resulted in a 20% increase in operational efficiency across all departments.
            </p>
          </div>
        </div>
        <div class="absolute -bottom-4 left-4 w-4/5 h-4 bg-gray-300 dark:bg-gray-700 rounded-full blur-sm opacity-50 group-hover:opacity-75 transition-opacity duration-500 transform translate-x-1/2 rotate-3"></div>
      </div>

      <!-- Infographic Card 3 -->
      <div class="relative group perspective-1000">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden transform-style-3d group-hover:rotate-y-6 group-hover:scale-105 transition-all duration-500 ease-in-out border border-gray-200 dark:border-gray-700 p-6 flex flex-col items-center text-center relative z-10">
          <div class="absolute inset-0 bg-gradient-to-br from-gray-50 to-white dark:from-gray-950 dark:to-gray-850 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-xl"></div>
          <div class="relative z-20 flex flex-col items-center p-4">
            <div class="flex items-center justify-center w-20 h-20 sm:w-24 sm:h-24 rounded-full bg-gray-200 dark:bg-gray-700 mb-6 shadow-inner-xl transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              <svg class="w-10 h-10 sm:w-12 sm:h-12 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0a2 2 0 01-2 2H6a2 2 0 01-2-2m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2M4 13L4 6a2 2 0 012-2h12a2 2 0 012 2v7"></path></svg>
            </div>
            <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-4 transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              95% Satisfaction
            </h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg leading-relaxed transform -translate-y-2 group-hover:translate-y-0 transition-transform duration-500">
              Customer feedback surveys show a consistent 95% satisfaction rate for our products and services.
            </p>
          </div>
        </div>
        <div class="absolute -bottom-4 right-4 w-4/5 h-4 bg-gray-300 dark:bg-gray-700 rounded-full blur-sm opacity-50 group-hover:opacity-75 transition-opacity duration-500 transform -translate-x-1/2 -rotate-3"></div>
      </div>

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

<style>
/* Define 3D Transform Utility Classes */
.perspective-1000 {
  perspective: 1000px;
}
.transform-style-3d {
  transform-style: preserve-3d;
}
.rotate-y-6 {
  transform: rotateY(6deg);
}
.-rotate-y-6 {
  transform: rotateY(-6deg);
}

/* Soft 3D shadow on hover for cards */
.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.dark .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Inner shadow for circles */
.shadow-inner-xl {
  box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.15), inset 0px 0px 5px rgba(255, 255, 255, 0.5);
}
.dark .shadow-inner-xl {
  box-shadow: inset 0px 5px 10px rgba(0, 0, 0, 0.6), inset 0px 0px 5px rgba(0, 0, 0, 0.3);
}
</style>

Composant Toast Notifications

Composant de notification toast complexe, de style glassmorphism, pour les tableaux de bord, avec des éléments translucides, des effets de flou et une palette de couleurs analogue. Entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="fixed inset-0 z-50 flex flex-col items-end justify-start p-4 space-y-4 pointer-events-none sm:p-6 md:p-8">
  <!-- Success Toast -->
  <div class="max-w-sm w-full bg-slate-100/30 dark:bg-slate-800/30 backdrop-blur-lg rounded-xl shadow-xl flex p-4 ring-1 ring-slate-200/50 dark:ring-slate-700/50 transition-all duration-300 ease-out transform translate-y-0 opacity-100 pointer-events-auto">
    <div class="flex-shrink-0">
      <svg class="h-6 w-6 text-emerald-500 dark:text-emerald-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </div>
    <div class="ml-3 w-0 flex-1 pt-0.5">
      <p class="text-sm font-semibold text-slate-800 dark:text-slate-200">Success!</p>
      <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Your changes have been saved successfully.</p>
      <div class="mt-4 flex space-x-7">
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-emerald-600 dark:text-emerald-400 hover:text-emerald-500 dark:hover:text-emerald-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          View Changes
        </button>
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          Dismiss
        </button>
      </div>
    </div>
    <div class="ml-4 flex flex-shrink-0">
      <button type="button" class="inline-flex rounded-md p-1.5 text-slate-500 dark:text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Warning Toast -->
  <div class="max-w-sm w-full bg-slate-100/30 dark:bg-slate-800/30 backdrop-blur-lg rounded-xl shadow-xl flex p-4 ring-1 ring-slate-200/50 dark:ring-slate-700/50 transition-all duration-300 ease-out transform translate-y-0 opacity-100 pointer-events-auto">
    <div class="flex-shrink-0">
      <svg class="h-6 w-6 text-amber-500 dark:text-amber-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.021 3.373 1.865 3.373h14.47c1.844 0 2.733-1.873 1.865-3.373L13.723 3.535c-.863-1.5-2.913-1.5-3.776 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
      </svg>
    </div>
    <div class="ml-3 w-0 flex-1 pt-0.5">
      <p class="text-sm font-semibold text-slate-800 dark:text-slate-200">Heads up!</p>
      <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Your session is about to expire. Please re-authenticate.</p>
      <div class="mt-4 flex space-x-7">
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-amber-600 dark:text-amber-400 hover:text-amber-500 dark:hover:text-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          Renew Session
        </button>
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          Later
        </button>
      </div>
    </div>
    <div class="ml-4 flex flex-shrink-0">
      <button type="button" class="inline-flex rounded-md p-1.5 text-slate-500 dark:text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>

  <!-- Error Toast -->
  <div class="max-w-sm w-full bg-slate-100/30 dark:bg-slate-800/30 backdrop-blur-lg rounded-xl shadow-xl flex p-4 ring-1 ring-slate-200/50 dark:ring-slate-700/50 transition-all duration-300 ease-out transform translate-y-0 opacity-100 pointer-events-auto">
    <div class="flex-shrink-0">
      <svg class="h-6 w-6 text-rose-500 dark:text-rose-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9.303-9.303a2.25 2.25 0 00-3.182 0l-10.101 10.101a2.25 2.25 0 000 3.182L10.96 21.04a2.25 2.25 0 003.182 0L21.04 10.96a2.25 2.25 0 000-3.182zM15.75 14.75h.007v.008H15.75v-.008z" />
      </svg>
    </div>
    <div class="ml-3 w-0 flex-1 pt-0.5">
      <p class="text-sm font-semibold text-slate-800 dark:text-slate-200">Error!</p>
      <p class="mt-1 text-sm text-slate-600 dark:text-slate-400">Failed to load data. Please try again later.</p>
      <div class="mt-4 flex space-x-7">
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-rose-600 dark:text-rose-400 hover:text-rose-500 dark:hover:text-rose-300 focus:outline-none focus:ring-2 focus:ring-rose-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          Retry
        </button>
        <button type="button" class="rounded-md bg-transparent p-1.5 text-sm font-medium text-slate-600 dark:text-slate-400 hover:text-slate-500 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
          Support
        </button>
      </div>
    </div>
    <div class="ml-4 flex flex-shrink-0">
      <button type="button" class="inline-flex rounded-md p-1.5 text-slate-500 dark:text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 focus:outline-none focus:ring-2 focus:ring-slate-500 focus:ring-offset-2 dark:focus:ring-offset-slate-900">
        <span class="sr-only">Close</span>
        <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>
  </div>
</div>

Glassmorphism_Grayscale_Badges_Component

Un composant simple et réactif de type badges de type glassmorphism avec une palette de couleurs en niveaux de gris, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative p-6 rounded-2xl shadow-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-30 border border-white border-opacity-30 dark:border-gray-700 dark:border-opacity-50 max-w-lg w-full overflow-hidden">
    <!-- Background blur elements - positioned absolutely for glassmorphism effect -->
    <div class="absolute inset-0 z-0" style="background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0));"></div>
    <div class="absolute -top-10 -left-10 w-40 h-40 bg-gray-300 dark:bg-gray-700 rounded-full mix-blend-multiply filter blur-xl opacity-20 dark:opacity-10 animate-blob delay-2000"></div>
    <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-gray-200 dark:bg-gray-800 rounded-full mix-blend-multiply filter blur-xl opacity-20 dark:opacity-10 animate-blob delay-4000"></div>
    <div class="relative z-10">
      <h2 class="text-2xl sm:text-3xl font-semibold mb-6 text-gray-800 dark:text-gray-100 text-center">
        Our Achievements
      </h2>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <!-- Badge 1 -->
        <div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
          <span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </span>
          <div>
            <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Certified Excellence</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">ISO 9001:2015</p>
          </div>
        </div>

        <!-- Badge 2 -->
        <div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
          <span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
            <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 8c1.657 0 3 .895 3 2s-1.343 2-3 2h-1c-1.657 0-3 .895-3 2s1.343 2 3 2h1a5 5 0 005-5v-1a5 5 0 00-5-5H7a5 5 0 00-5 5v1a5 5 0 005 5h1c1.657 0 3-.895 3-2s-1.343-2-3-2H8c-1.657 0-3-.895-3-2s1.343-2 3-2h1"></path></svg>
          </span>
          <div>
            <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Industry Leader</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">Top 10 Innovator</p>
          </div>
        </div>

        <!-- Badge 3 -->
        <div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
          <span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
            <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 6l3 1m0 0l-3 1.5M6 7l3-1m0 0l-3 1.5m0 0l-3 1.5M6 9l3-1m0 0a9.002 9.002 0 00-3-7.5M12 6a9.002 9.002 0 013 7.5"></path></svg>
          </span>
          <div>
            <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Client Satisfaction</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">98% Positive Feedback</p>
          </div>
        </div>

        <!-- Badge 4 -->
        <div class="flex items-center p-4 rounded-xl backdrop-blur-md backdrop-filter bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 border border-white border-opacity-20 dark:border-gray-700 dark:border-opacity-40 shadow-sm">
          <span class="block p-3 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 mr-4">
            <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="M7 11V7m0 0L5 9m2-2l2 2m7-2v4m0 0l2 2m-2-2l-2 2M12 18h.01M12 6h.01M12 12h.01M12 18h.01M12 6h.01M12 12h.01"></path></svg>
          </span>
          <div>
            <p class="text-lg font-medium text-gray-800 dark:text-gray-100">Award Winning</p>
            <p class="text-sm text-gray-600 dark:text-gray-300">Tech Growth Award 2023</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* This is for the custom blob animation */
  @keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
  }
  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55);
  }
</style>

Carte de profil d’utilisateur neumorphe - Pastel

Une carte de profil utilisateur simple et réactive avec un design neumorphique sur le thème du pastel, adaptée aux portfolios, y compris la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="w-full max-w-sm rounded-[3rem] p-8 text-center transition-all duration-300 ease-in-out
    bg-gradient-to-br from-purple-100 via-pink-100 to-rose-100
    shadow-[10px_10px_20px_#d1caca,-10px_-10px_20px_#ffffff]
    dark:from-gray-700 dark:via-gray-750 dark:to-gray-800
    dark:shadow-[10px_10px_20px_#222222,-10px_-10px_20px_#444444]">

    <div class="relative w-32 h-32 mx-auto mb-6 rounded-full
      shadow-[inset_5px_5px_10px_#b9a8bd,inset_-5px_-5px_10px_#f5e9f6]
      dark:shadow-[inset_5px_5px_10px_#333333,inset_-5px_-5px_10px_#555555]">
      <img class="w-full h-full object-cover rounded-full p-1 border-4 border-transparent
        shadow-[0px_0px_0px_2px_#ffffff,0px_0px_0px_4px_#ddcce1]
        dark:shadow-[0px_0px_0px_2px_#333,0px_0px_0px_4px_#555]"
        src="https://randomuser.me/api/portraits/women/14.jpg" alt="Profile Picture">
      <span class="absolute bottom-1 right-1 block w-4 h-4 rounded-full bg-green-400
        shadow-[0px_0px_0px_2px_#ffffff,0px_0px_0px_4px_#ddcce1]
        dark:shadow-[0px_0px_0px_2px_#333,0px_0px_0px_4px_#555]"></span>
    </div>

    <h2 class="text-2xl font-bold mb-2 text-purple-700 dark:text-purple-300">Jane Doe</h2>
    <p class="text-md text-pink-600 mb-6 dark:text-pink-300">Creative Designer & Developer</p>

    <div class="grid grid-cols-3 gap-4 mb-8">
      <div class="p-3 rounded-xl
        shadow-[inset_5px_5px_10px_#d1caca,inset_-5px_-5px_10px_#ffffff]
        dark:shadow-[inset_5px_5px_10px_#222222,inset_-5px_-5px_10px_#444444]">
        <p class="text-lg font-semibold text-rose-500 dark:text-rose-300">12</p>
        <p class="text-sm text-purple-500 dark:text-purple-200">Projects</p>
      </div>
      <div class="p-3 rounded-xl
        shadow-[inset_5px_5px_10px_#d1caca,inset_-5px_-5px_10px_#ffffff]
        dark:shadow-[inset_5px_5px_10px_#222222,inset_-5px_-5px_10px_#444444]">
        <p class="text-lg font-semibold text-rose-500 dark:text-rose-300">80</p>
        <p class="text-sm text-purple-500 dark:text-purple-200">Clients</p>
      </div>
      <div class="p-3 rounded-xl
        shadow-[inset_5px_5px_10px_#d1caca,inset_-5px_-5px_10px_#ffffff]
        dark:shadow-[inset_5px_5px_10px_#222222,inset_-5px_-5px_10px_444444]">
        <p class="text-lg font-semibold text-rose-500 dark:text-rose-300">5</p>
        <p class="text-sm text-purple-500 dark:text-purple-200">Awards</p>
      </div>
    </div>

    <div class="flex justify-center space-x-4">
      <button class="py-3 px-6 rounded-3xl font-semibold transition-all duration-300 ease-in-out
        bg-gradient-to-br from-purple-200 to-pink-200 text-purple-700
        shadow-[7px_7px_14px_#b9a8bd,-7px_-7px_14px_#ffffff]
        hover:shadow-[inset_5px_5px_10px_#b9a8bd,inset_-5px_-5px_10px_#f5e9f6]
        dark:from-gray-600 dark:to-gray-700 dark:text-purple-300
        dark:shadow-[7px_7px_14px_#222222,-7px_-7px_14px_#444444]
        dark:hover:shadow-[inset_5px_5px_10px_#333333,inset_-5px_-5px_10px_#555555]">
        View Portfolio
      </button>
      <button class="py-3 px-6 rounded-3xl font-semibold transition-all duration-300 ease-in-out
        bg-gradient-to-br from-pink-200 to-rose-200 text-pink-700
        shadow-[7px_7px_14px_#b9a8bd,-7px_-7px_14px_#ffffff]
        hover:shadow-[inset_5px_5px_10px_#b9a8bd,inset_-5px_-5px_10px_#f5e9f6]
        dark:from-gray-700 dark:to-gray-600 dark:text-pink-300
        dark:shadow-[7px_7px_14px_#222222,-7px_-7px_14px_#444444]
        dark:hover:shadow-[inset_5px_5px_10px_#333333,inset_-5px_-5px_10px_#555555]">
        Contact Me
      </button>
    </div>
  </div>
</div>

Neumorphic Avis sur les produits Composant

Un composant d’avis sur les produits simple et réactif avec un design neumorphique, une palette de couleurs analogue et une prise en charge du mode sombre, adapté aux sites Web d’entreprise ou d’entreprise.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-100 via-pink-100 to-red-100 dark:from-purple-900 dark:via-pink-900 dark:to-red-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-md mx-auto p-6 md:p-8 rounded-2xl shadow-xl transition-all duration-300 ease-in-out
              bg-gradient-to-br from-purple-50 to-pink-50
              dark:from-purple-800 dark:to-pink-800
              dark:shadow-neutral-900/50
              shadow-purple-200/50 dark:shadow-inner-xl
              dark:border dark:border-pink-700/50">

    <h3 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center
               drop-shadow-sm dark:drop-shadow-md">
      Customer Reviews
    </h3>

    <div class="space-y-6">

      <!-- Review 1 -->
      <div class="p-4 rounded-xl shadow-md transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-100 to-pink-100
                  dark:from-purple-900 dark:to-pink-900
                  shadow-md shadow-purple-200/50 dark:shadow-neutral-900/40
                  dark:hover:shadow-neutral-900/60
                  hover:shadow-lg hover:shadow-purple-300/50
                  dark:border dark:border-pink-800/50">
        <div class="flex items-center mb-3">
          <img class="w-10 h-10 rounded-full mr-3 shadow-sm from-red-200 to-pink-200 dark:from-red-800 dark:to-pink-800"
               src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Doe</p>
            <div class="flex text-yellow-500">
              <svg class="w-4 h-4" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
          “This product exceeded my expectations! The quality is superb and it was exactly what I needed. Highly recommend it to everyone looking for a reliable solution.”
        </p>
      </div>

      <!-- Review 2 -->
      <div class="p-4 rounded-xl shadow-md transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-100 to-pink-100
                  dark:from-purple-900 dark:to-pink-900
                  shadow-md shadow-purple-200/50 dark:shadow-neutral-900/40
                  dark:hover:shadow-neutral-900/60
                  hover:shadow-lg hover:shadow-purple-300/50
                  dark:border dark:border-pink-800/50">
        <div class="flex items-center mb-3">
          <img class="w-10 h-10 rounded-full mr-3 shadow-sm from-red-200 to-pink-200 dark:from-red-800 dark:to-pink-800"
               src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">John Smith</p>
            <div class="flex text-yellow-500">
              <svg class="w-4 h-4" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
          “Good product overall, but there's room for improvement in the user interface. Still, it delivers on its core promises. Worth considering.”
        </p>
      </div>

      <!-- Review 3 -->
      <div class="p-4 rounded-xl shadow-md transition-all duration-300 ease-in-out
                  bg-gradient-to-br from-purple-100 to-pink-100
                  dark:from-purple-900 dark:to-pink-900
                  shadow-md shadow-purple-200/50 dark:shadow-neutral-900/40
                  dark:hover:shadow-neutral-900/60
                  hover:shadow-lg hover:shadow-purple-300/50
                  dark:border dark:border-pink-800/50">
        <div class="flex items-center mb-3">
          <img class="w-10 h-10 rounded-full mr-3 shadow-sm from-red-200 to-pink-200 dark:from-red-800 dark:to-pink-800"
               src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Emily White</p>
            <div class="flex text-yellow-500">
              <svg class="w-4 h-4" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-4 h-4" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
          “Absolutely fantastic! The customer support was incredibly helpful, and the product itself is flawless. A joy to use every day.”
        </p>
      </div>

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

Composant Triadic 3D Business Layout

Il s’agit d’un composant de mise en page de complexité modérée pour les sites Web d’entreprise, avec une palette de couleurs triadique et des éléments de conception 3D pour plus de profondeur, avec une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-900 dark:to-teal-950 min-h-screen p-4 sm:p-6 lg:p-8 font-sans transition-colors duration-300">

  <!-- Header Section -->
  <header class="max-w-7xl mx-auto mb-8 lg:mb-12 rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-4 sm:p-6 lg:p-8 transform perspective-1000 rotateX-3 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateX-0 hover:translateZ-10 hover:shadow-2xl">
    <div class="flex flex-col sm:flex-row justify-between items-center">
      <div class="flex items-center space-x-2">
        <svg class="h-8 w-8 text-indigo-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9a9 9 0 00-9-9H3m0 0l3.75 3.75M3 12h6.5m4.25-5.25L12 3m-4.5 9h-4.5m16.5 0h-4.5m-4.5 4.5l-3.75 3.75M12 21V9.75" />
        </svg>
        <h1 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white capitalize">Company Name</h1>
      </div>
      <nav class="mt-4 sm:mt-0">
        <ul class="flex flex-wrap justify-center sm:justify-start gap-x-4 sm:gap-x-6 text-base font-medium">
          <li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Home</a></li>
          <li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Services</a></li>
          <li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">About</a></li>
          <li><a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Main Content Area -->
  <main class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">

    <!-- Hero/Featured Section (Column 1) -->
    <section class="lg:col-span-2 rounded-xl bg-gradient-to-br from-indigo-500 via-purple-600 to-teal-500 shadow-2xl overflow-hidden p-6 sm:p-8 lg:p-10 relative group transform perspective-1000 rotateY-3 translateZ-0 transition-all duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-deep dark:from-indigo-700 dark:via-purple-800 dark:to-teal-700">
      <div class="absolute inset-0 bg-pattern opacity-10 dark:opacity-20 pointer-events-none"></div>
      <div class="relative z-10 flex flex-col items-start">
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white leading-tight mb-4 capitalize drop-shadow-lg">Innovate. Achieve. Transform.</h2>
        <p class="text-base sm:text-lg text-indigo-100 mb-6 lg:mb-8 max-w-2xl">We provide cutting-edge solutions to propel your business forward in the digital age. Our expert team is dedicated to your success.</p>
        <button class="px-6 py-3 bg-white text-indigo-700 font-bold rounded-full shadow-lg hover:bg-indigo-100 transition-all duration-300 transform hover:scale-105 dark:bg-gray-200 dark:text-purple-800 capitalize">Discover More</button>
      </div>
    </section>

    <!-- Sidebar/Stats Section (Column 2) -->
    <aside class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY--3 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl flex flex-col justify-between">
      <div>
        <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 capitalize">Our Impact</h3>
        <div class="space-y-4">
          <div class="flex items-center space-x-3">
            <div class="p-3 bg-indigo-100 rounded-full dark:bg-indigo-900/50">
              <svg class="h-6 w-6 text-indigo-600 dark:text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6" />
              </svg>
            </div>
            <div>
              <p class="text-xl font-semibold text-gray-900 dark:text-white">250+</p>
              <p class="text-gray-600 dark:text-gray-400 capitalize">Satisfied Clients</p>
            </div>
          </div>
          <div class="flex items-center space-x-3">
            <div class="p-3 bg-purple-100 rounded-full dark:bg-purple-900/50">
              <svg class="h-6 w-6 text-purple-600 dark:text-teal-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16v4m-2-2h4M13 17v4m-2-2h4m5-16v4m-2-2h4m-2 20h2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2h12zm-3-10L14 7l-2 2-2-2-3 3-2-2m6-2V6" />
              </svg>
            </div>
            <div>
              <p class="text-xl font-semibold text-gray-900 dark:text-white">10+ Years</p>
              <p class="text-gray-600 dark:text-gray-400 capitalize">Industry Experience</p>
            </div>
          </div>
          <div class="flex items-center space-x-3">
            <div class="p-3 bg-teal-100 rounded-full dark:bg-teal-900/50">
              <svg class="h-6 w-6 text-teal-600 dark:text-indigo-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.747-.602-3.328-1.602-4.664z" />
              </svg>
            </div>
            <div>
              <p class="text-xl font-semibold text-gray-900 dark:text-white">99%</p>
              <p class="text-gray-600 dark:text-gray-400 capitalize">Project Success Rate</p>
            </div>
          </div>
        </div>
      </div>
    </aside>

    <!-- Content Grid (Column 3) -->
    <section class="lg:col-span-3 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">

      <!-- Service Card 1 -->
      <article class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY-1 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl">
        <img src="https://picsum.photos/400/250?random=1" alt="Web Development" class="rounded-lg mb-4 w-full object-cover" loading="lazy">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 capitalize">Web Development</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">Building responsive, high-performance websites tailored to your business needs.</p>
        <a href="#" class="text-indigo-600 hover:underline dark:text-purple-400 text-sm font-semibold capitalize">Learn More &rarr;</a>
      </article>

      <!-- Service Card 2 -->
      <article class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY-NEG1 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl">
        <img src="https://picsum.photos/400/250?random=2" alt="Digital Marketing" class="rounded-lg mb-4 w-full object-cover" loading="lazy">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 capitalize">Digital Marketing</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">Strategizing and executing effective digital campaigns to maximize your reach.</p>
        <a href="#" class="text-indigo-600 hover:underline dark:text-purple-400 text-sm font-semibold capitalize">Learn More &rarr;</a>
      </article>

      <!-- Service Card 3 -->
      <article class="rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000 rotateY-2 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateY-0 hover:translateZ-10 hover:shadow-2xl">
        <img src="https://picsum.photos/400/250?random=3" alt="Cloud Solutions" class="rounded-lg mb-4 w-full object-cover" loading="lazy">
        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 capitalize">Cloud Solutions</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-4 text-sm">Scalable and secure cloud infrastructure to power your business operations.</p>
        <a href="#" class="text-indigo-600 hover:underline dark:text-purple-400 text-sm font-semibold capitalize">Learn More &rarr;</a>
      </article>

      <!-- Call to Action Card -->
      <div class="md:col-span-2 lg:col-span-3 bg-indigo-600 dark:bg-purple-800 rounded-xl shadow-xl overflow-hidden p-6 sm:p-8 lg:p-10 flex flex-col sm:flex-row items-center justify-between text-white transform perspective-1000 rotateX-NEG2 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateX-0 hover:translateZ-10 hover:shadow-2xl">
        <div class="text-center sm:text-left mb-4 sm:mb-0">
          <h3 class="text-2xl font-bold mb-2 capitalize">Ready to elevate your business?</h3>
          <p class="text-indigo-100 text-lg">Let's create something extraordinary together.</p>
        </div>
        <button class="px-6 py-3 bg-white text-indigo-700 font-bold rounded-full shadow-lg hover:bg-indigo-100 transition-all duration-300 transform hover:scale-105 dark:bg-gray-200 dark:text-purple-800 capitalize">Get Started Today</button>
      </div>

    </section>
  </main>

  <!-- Footer Section -->
  <footer class="max-w-7xl mx-auto mt-8 lg:mt-12 rounded-xl bg-white/70 backdrop-blur-md shadow-xl border border-white dark:bg-gray-800/70 dark:border-gray-700 p-4 sm:p-6 lg:p-8 text-center text-gray-700 dark:text-gray-300 transform perspective-1000 rotateX-3 translateZ-0 transition-transform duration-500 will-change-transform hover:rotateX-0 hover:translateZ-10 hover:shadow-2xl">
    <p>&copy; 2023 Company Name. All rights reserved.</p>
    <div class="flex justify-center space-x-4 mt-2">
      <a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Privacy Policy</a>
      <span class="text-gray-400">|</span>
      <a href="#" class="text-gray-700 hover:text-indigo-600 dark:text-gray-300 dark:hover:text-purple-400 transition-colors duration-200 capitalize">Terms of Service</a>
    </div>
  </footer>

</div>

<style>
  /* Custom properties for 3D transforms */
  .perspective-1000 { perspective: 1000px; }
  .rotateX-3 { transform: rotateX(3deg); }
  .rotateX-NEG2 { transform: rotateX(-2deg); }
  .rotateY-3 { transform: rotateY(3deg); }
  .rotateY-NEG1 { transform: rotateY(-1deg); }
  .rotateY-2 { transform: rotateY(2deg); }
  .translateZ-0 { transform: translateZ(0); }
  
  /* Deeper shadow for 3D effect */
  .shadow-deep {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
  }
  .dark .shadow-deep {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
  }

  /* Simple patterned background for hero */
  .bg-pattern {
    background-image: radial-gradient(#ffffff20 1px, transparent 1px);
    background-size: 20px 20px;
  }

  /* Ensure transforms apply correctly */
  .group:hover .group-hover\:rotateX-0 { transform: rotateX(0deg); }
  .group:hover .group-hover\:translateZ-10 { transform: translateZ(10px); }
  .group:hover .group-hover\:shadow-2xl { box-shadow: var(--tw-shadow); }
</style>

Composant CAPTCHA

Un composant CAPTCHA inspiré du Material Design avec une palette de couleurs monochromatiques, adapté aux blogs ou aux sites de contenu. Comprend une case à cocher, un texte de type reCAPTCHA « Je ne suis pas un robot » et une zone de vérification d’image de remplacement. Entièrement réactif et prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900 font-sans">
  <div class="w-full max-w-sm rounded-lg shadow-xl overflow-hidden bg-white dark:bg-gray-800 transition-colors duration-300">
    <div class="p-6 space-y-6">
      <!-- CAPTCHA Header -->
      <div class="flex items-center space-x-3">
        <svg class="h-8 w-8 text-gray-700 dark:text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.01 12.01 0 002.92 12c0 3.072 1.407 5.8 3.636 7.619A11.952 11.952 0 0112 21.055c3.072 0 5.8-1.407 7.619-3.636A11.952 11.952 0 0121.08 12c0-3.072-1.407-5.8-3.636-7.619z" />
        </svg>
        <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100">Security Check</h3>
      </div>

      <!-- Checkbox Area -->
      <div class="flex items-center space-x-4 bg-gray-50 dark:bg-gray-700 p-4 rounded-md shadow-inner">
        <input type="checkbox" id="not-robot" class="h-6 w-6 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:border-gray-500 dark:bg-gray-600 dark:checked:bg-blue-600 dark:checked:border-transparent cursor-pointer">
        <label for="not-robot" class="text-lg text-gray-700 dark:text-gray-200 select-none cursor-pointer">I'm not a robot</label>
      </div>

      <!-- Verification Content Placeholder -->
      <div class="border border-gray-200 dark:border-gray-600 rounded-lg p-4 space-y-4">
        <p class="text-gray-600 dark:text-gray-300 text-sm">
          Please click the images containing a
          <strong class="font-medium text-gray-700 dark:text-gray-200">traffic light</strong>.
          Click verify once there are none left.
        </p>
        <div class="grid grid-cols-3 gap-2">
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/101/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
              <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/102/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
                <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/103/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
                <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/104/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
                <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/105/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
                <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
          <button class="relative block w-full h-24 sm:h-28 bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            <img src="https://picsum.photos/id/106/200/200" alt="Image for verification" class="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            <div class="absolute inset-0 bg-blue-500 bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-200 flex items-center justify-center">
                <svg class="h-8 w-8 text-white opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-200" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
            </div>
          </button>
        </div>
        <div class="flex justify-end pt-2">
          <button class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800">
            Verify
          </button>
        </div>
      </div>
    </div>

    <!-- CAPTCHA Footer - reCAPTCHA branding placeholder -->
    <div class="flex items-center justify-between p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-xs text-gray-500 dark:text-gray-400">
      <div class="flex items-center space-x-1">
        <svg class="h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-3.5-3.5L7 12l2-2 4 4 6-6 1.5 1.5L10 17z"/>
        </svg>
        <span>reCAPTCHA</span>
      </div>
      <div class="text-right">
        <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Privacy</a>
        <span> - </span>
        <a href="#" class="text-blue-600 hover:underline dark:text-blue-400">Terms</a>
      </div>
    </div>
  </div>
</div>

Composant de galerie de produits

Un composant de galerie de produits simple et réactif avec des tons de terre, optimisé pour le mode sombre et la consommation de contenu. Idéal pour les blogs ou les sites e-commerce affichant des articles.

Ouvrir Aperçu

                <div class="bg-stone-100 dark:bg-stone-900 py-8 sm:py-12 md:py-16">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl font-extrabold text-stone-900 dark:text-stone-50 mb-8 text-center sm:text-4xl">Our Latest Creations</h2>
    
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">
      <!-- Product Card 1 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1018/400/300" alt="Forest Stream">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Enchanted Forest Canvas</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-3">A breathtaking view captured on canvas, perfect for any nature lover's home.</p>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold text-stone-900 dark:text-stone-50">$120.00</span>
            <button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1060/400/300" alt="Desert Landscape">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Desert Bloom Sculpture</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-3">Handcrafted sculpture inspired by the resilient beauty of desert florals.</p>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold text-stone-900 dark:text-stone-50">$95.00</span>
            <button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1004/400/300" alt="Mountain Peak">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Alpine Summit Print</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-3">A stunning photographic print capturing the majesty of a mountain peak.</p>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold text-stone-900 dark:text-stone-50">$80.00</span>
            <button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product Card 4 -->
      <div class="bg-white dark:bg-stone-800 rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:scale-105 hover:shadow-lg">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1020/400/300" alt="Beach Sunset">
        <div class="p-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-2">Coastal Serenity Frame</h3>
          <p class="text-stone-600 dark:text-stone-300 text-sm mb-3">Bring the calming essence of the ocean into your space with this piece.</p>
          <div class="flex justify-between items-center">
            <span class="text-lg font-bold text-stone-900 dark:text-stone-50">$110.00</span>
            <button class="px-4 py-2 bg-amber-700 text-white dark:bg-amber-600 dark:hover:bg-amber-500 rounded-lg hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Retro_Vintage_Shopping_Cart_Component

Un composant de panier d’achat simple, de style rétro/vintage avec une palette de couleurs en niveaux de gris, optimisé pour les sites Web d’entreprise/d’entreprise et entièrement réactif avec prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen text-gray-800 dark:text-gray-200 font-mono">
  <div class="max-w-xl mx-auto border border-gray-300 dark:border-gray-700 p-6 sm:p-8 bg-white dark:bg-gray-800 shadow-lg">
    <h2 class="text-2xl sm:text-3xl font-bold text-center uppercase mb-8 tracking-widest">Your Order</h2>

    <div class="space-y-6 mb-8">
      <!-- Cart Item 1 -->
      <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=1" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
          <div>
            <p class="text-lg font-semibold">Classic Widget</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 1</p>
          </div>
        </div>
        <p class="text-lg font-bold">$19.99</p>
      </div>

      <!-- Cart Item 2 -->
      <div class="flex items-center justify-between border-b border-gray-200 dark:border-gray-700 pb-4">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=2" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
          <div>
            <p class="text-lg font-semibold">Turbo Charger</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 2</p>
          </div>
        </div>
        <p class="text-lg font-bold">$99.98</p>
      </div>

      <!-- Cart Item 3 -->
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
          <img src="https://picsum.photos/80/80?random=3" alt="Product Image" class="w-16 h-16 sm:w-20 sm:h-20 object-cover border border-gray-300 dark:border-gray-600">
          <div>
            <p class="text-lg font-semibold">Mega Bolt Kit</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Quantity: 1</p>
          </div>
        </div>
        <p class="text-lg font-bold">$34.50</p>
      </div>
    </div>

    <!-- Order Summary -->
    <div class="border-t border-gray-300 dark:border-gray-700 pt-6 space-y-3 mb-8">
      <div class="flex justify-between items-center">
        <p class="text-gray-700 dark:text-gray-300">Subtotal:</p>
        <p class="font-bold">$154.47</p>
      </div>
      <div class="flex justify-between items-center">
        <p class="text-gray-700 dark:text-gray-300">Shipping:</p>
        <p class="font-bold">$7.50</p>
      </div>
      <div class="flex justify-between items-center text-xl font-extrabold border-t border-gray-300 dark:border-gray-700 pt-3 mt-3">
        <p>Total:</p>
        <p>$161.97</p>
      </div>
    </div>

    <button class="w-full py-3 px-6 bg-black text-white dark:bg-gray-100 dark:text-gray-900 uppercase tracking-widest text-lg sm:text-xl font-bold border-2 border-black dark:border-gray-100 hover:bg-gray-800 dark:hover:bg-gray-300 transition-colors duration-200">
      Checkout</button>
  </div>
</div>

1 ... 26 27 28 29 30 ... 242

Catégories

Tous les composants