Skeuomorphic Avis sur le produit Composant - Bleu océan
Un composant d’évaluation de produit de complexité modérée conçu avec un style skeuomorphe, utilisant des tons océan/bleu à des fins commerciales/d’entreprise. Il présente un design réactif, une prise en charge du mode sombre et des éléments interactifs.
HTML Code
<div class="font-sans antialiased bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen">
<!-- Reviews Container -->
<div class="max-w-4xl mx-auto bg-gradient-to-br from-blue-200 to-blue-300 dark:from-gray-700 dark:to-gray-700 shadow-neu dark:shadow-neu-dark rounded-xl p-6 sm:p-8 lg:p-10 border-t border-l border-blue-100 dark:border-gray-600 relative overflow-hidden">
<div class="absolute inset-0 bg-blue-300 dark:bg-gray-800 opacity-20 dark:opacity-10 rounded-xl pointer-events-none"></div>
<h2 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-100 mb-8 text-center drop-shadow-md relative z-10">
What Our Customers Say
</h2>
<!-- Overall Rating Section -->
<div class="bg-blue-100 dark:bg-gray-800 rounded-lg p-5 mb-8 shadow-inner-neu dark:shadow-inner-neu-dark border border-blue-50 dark:border-gray-700 relative z-10">
<div class="flex flex-col sm:flex-row items-center justify-between">
<div class="text-center sm:text-left mb-4 sm:mb-0">
<p class="text-6xl font-bold text-blue-800 dark:text-blue-200">4.8</p>
<div class="flex justify-center sm:justify-start mt-1">
<svg class="w-6 h-6 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
<svg class="w-6 h-6 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
<svg class="w-6 h-6 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
<svg class="w-6 h-6 text-yellow-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
<svg class="w-6 h-6 text-yellow-300 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
</div>
<p class="text-blue-700 dark:text-blue-300 text-sm mt-1">(Based on 2,543 reviews)</p>
</div>
<button class="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full shadow-md neumorph-btn dark:neumorph-btn-dark active:scale-95 transition-all duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" /></svg>
<span>Write a Review</span>
</button>
</div>
</div>
<!-- Review List -->
<div class="space-y-6 relative z-10">
<!-- Review Item 1 -->
<div class="bg-blue-100 dark:bg-gray-800 rounded-lg p-5 shadow-inner-neu dark:shadow-inner-neu-dark border border-blue-50 dark:border-gray-700">
<div class="flex items-center mb-3">
<img class="w-12 h-12 rounded-full ring-2 ring-blue-400 dark:ring-blue-600 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="ml-4">
<p class="font-semibold text-blue-900 dark:text-blue-100">John Doe</p>
<div class="flex text-yellow-500 text-sm">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
<svg class="w-4 h-4 text-yellow-300 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
</div>
</div>
</div>
<h3 class="text-lg font-bold text-blue-800 dark:text-blue-200 mb-2">"Absolutely stellar service!"</h3>
<p class="text-blue-700 dark:text-blue-300 leading-relaxed mb-4">
I was thoroughly impressed with the professionalism and efficiency. The product exceeded my expectations and functionality is truly top-notch. Highly recommended for any business looking to enhance their operations.
</p>
<p class="text-sm text-blue-600 dark:text-blue-400 text-right">Reviewed on January 15, 2024</p>
</div>
<!-- Review Item 2 -->
<div class="bg-blue-100 dark:bg-gray-800 rounded-lg p-5 shadow-inner-neu dark:shadow-inner-neu-dark border border-blue-50 dark:border-gray-700">
<div class="flex items-center mb-3">
<img class="w-12 h-12 rounded-full ring-2 ring-blue-400 dark:ring-blue-600 shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="ml-4">
<p class="font-semibold text-blue-900 dark:text-blue-100">Jane Smith</p>
<div class="flex text-yellow-500 text-sm">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
</div>
</div>
</div>
<h3 class="text-lg font-bold text-blue-800 dark:text-blue-200 mb-2">"A game changer for our team!"</h3>
<p class="text-blue-700 dark:text-blue-300 leading-relaxed mb-4">
The customer support was responsive and helpful, guiding us through setup seamlessly. This product has significantly improved our workflow and team collaboration. We couldn't be happier with our investment.
</p>
<p class="text-sm text-blue-600 dark:text-blue-400 text-right">Reviewed on February 01, 2024</p>
</div>
<!-- Review Item 3 -->
<div class="bg-blue-100 dark:bg-gray-800 rounded-lg p-5 shadow-inner-neu dark:shadow-inner-neu-dark border border-blue-50 dark:border-gray-700">
<div class="flex items-center mb-3">
<img class="w-12 h-12 rounded-full ring-2 ring-blue-400 dark:ring-blue-600 shadow-md" src="https://randomuser.me/api/portraits/women/21.jpg" alt="User Avatar">
<div class="ml-4">
<p class="font-semibold text-blue-900 dark:text-blue-100">Emily White</p>
<div class="flex text-yellow-500 text-sm">
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.785.57-1.84-.197-1.54-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z" /></svg>
<svg class="w-4 h-4 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.165 2.508c-.282-.877-1.564-.877-1.846 0l-1.09 3.376a1 1 0 01-.97.7h-3.56c-.958 0-1.353 1.24.57 1.81l2.88 2.09c.31.226.467.625.352 1.01l-1.09 3.377c-.282.877.747 1.6.973 1.01l2.88-2.09c.31-.226.744-.226 1.054 0l2.88 2.09c.226.59.973-.133.691-1.01l-1.09-3.377a1 1 0 01.352-1.01l2.88-2.09c1.923-.57.928-1.81-.352-1.81h-3.56a1 1 0 01-.97-.7l-1.09-3.376z" clip-rule="evenodd" /></svg>
</div>
</div>
</div>
<h3 class="text-lg font-bold text-blue-800 dark:text-blue-200 mb-2">"Very pleased with this purchase!"</h3>
<p class="text-blue-700 dark:text-blue-300 leading-relaxed mb-4">
The product seamlessly integrates with our existing systems, and the learning curve was minimal. It's a robust solution that delivers on its promises. Our team's productivity has noticeably increased.
</p>
<p class="text-sm text-blue-600 dark:text-blue-400 text-right">Reviewed on February 10, 2024</p>
</div>
</div>
</div>
<!-- Custom Styles for Skeuomorphism -->
<style>
.shadow-neu {
box-shadow: 8px 8px 16px #9ecbf2, -8px -8px 16px #d8f1ff;
}
.shadow-neu-dark {
box-shadow: 8px 8px 16px #4a4a4a, -8px -8px 16px #222222;
}
.shadow-inner-neu {
box-shadow: inset 5px 5px 10px #b1d8f7, inset -5px -5px 10px #e1f4ff;
}
.shadow-inner-neu-dark {
box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
}
.neumorph-btn {
box-shadow: 4px 4px 8px rgba(0,0,0,0.2), -4px -4px 8px rgba(255,255,255,0.7),
inset 0.5px 0.5px 1px rgba(255,255,255,0.5), inset -0.5px -0.5px 1px rgba(0,0,0,0.1);
}
.neumorph-btn-dark {
box-shadow: 4px 4px 8px #2a2a2a, -4px -4px 8px #525252,
inset 0.5px 0.5px 1px rgba(255,255,255,0.1), inset -0.5px -0.5px 1px rgba(0,0,0,0.3);
}
.neumorph-btn:active {
box-shadow: inset 4px 4px 8px rgba(0,0,0,0.2), inset -4px -4px 8px rgba(255,255,255,0.7),
0 0 0 rgba(255,255,255,0), 0 0 0 rgba(0,0,0,0);
}
.neumorph-btn-dark:active {
box-shadow: inset 4px 4px 8px #2a2a2a, inset -4px -4px 8px #525252,
0 0 0 rgba(255,255,255,0), 0 0 0 rgba(0,0,0,0);
}
</style>
<!-- You can add a dark mode toggle script if needed, here's a placeholder comment -->
<!-- <script>
// Example Toggle Script (requires some JS, not part of the HTML-only output)
document.documentElement.classList.toggle('dark');
</script> -->
</div>Composants associés
Neumorphic_Product_Reviews_Component_High_Contrast
Il s’agit d’un composant complexe et contrasté neumorphique d’avis sur les produits, doté de fonctions de réservation, conçu pour la réactivité et le mode sombre, offrant une interface utilisateur riche et interactive.
Composant - Bauhaus Rainbow Gradient
Un composant simple et fonctionnel d’avis sur les produits avec un design inspiré du Bauhaus et une palette de couleurs arc-en-ciel, adapté au conseil/services. Entièrement réactif avec prise en charge du mode sombre.
Composant Avis sur les produits
Un composant minimaliste d’avis sur les produits conçu pour les interfaces de médias sociaux, intégrant une palette de couleurs triadique et des éléments interactifs.