Composant de la section des commentaires
Un composant complexe et attrayant de section de commentaires inspiré de la 3D pour les sites Web d’alimentation/restaurant, avec des neutres froids, une réactivité totale et une prise en charge du mode sombre.
HTML Code
<section class="bg-gray-100 dark:bg-gray-900 py-12 sm:py-16 lg:py-20 font-sans">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 sm:mb-16 dark:text-gray-100 leading-tight tracking-tight cool-neutral-text-gradient ">
What Our <span class="relative inline-block">
<span class="block absolute -inset-1 -skew-y-3 bg-red-500 dark:bg-red-700 rounded-lg"></span>
<span class="relative text-white dark:text-gray-900 drop-shadow-lg">Customers</span>
</span> Say
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-10 lg:gap-12">
<!-- Comment Card 1 -->
<div class="relative p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden hover:scale-105 transition-transform duration-300 ease-in-out
transform rotate-x-6 rotate-y-3 skew-x-2 skew-y-1 perspective-1000
dark:hover:shadow-red-500/30
after:absolute after:inset-y-0 after:left-0 after:w-1 after:bg-red-500 after:rounded-l-lg
before:absolute before:inset-x-0 before:top-0 before:h-1 before:bg-red-400 before:rounded-t-lg
group">
<div class="absolute inset-0 bg-gradient-to-br from-red-50 to-orange-50 dark:from-gray-900 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl z-0"></div>
<div class="relative z-10 flex flex-col h-full">
<div class="flex items-center mb-4">
<img class="w-14 h-14 rounded-full border-4 border-red-300 dark:border-red-600 shadow-lg" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar">
<div class="ml-4">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-100">Alice Johnson</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Food Critic</p>
</div>
</div>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
</div>
<p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6 flex-grow">
"Absolutely blown away by the quality and flavor! The delivery was super fast, and the food arrived hot and fresh. This is my new go-to for online orders. Highly recommend the chef's special!"
</p>
<div class="flex justify-end mt-auto">
<a href="#" class="inline-flex items-center text-red-600 dark:text-red-400 font-semibold hover:underline">
Read More
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- Comment Card 2 -->
<div class="relative p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden hover:scale-105 transition-transform duration-300 ease-in-out
transform rotate-x-6 rotate-y-3 skew-x-2 skew-y-1 perspective-1000
dark:hover:shadow-blue-500/30
after:absolute after:inset-y-0 after:left-0 after:w-1 after:bg-blue-500 after:rounded-l-lg
before:absolute before:inset-x-0 before:top-0 before:h-1 before:bg-blue-400 before:rounded-t-lg
group">
<div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-gray-900 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl z-0"></div>
<div class="relative z-10 flex flex-col h-full">
<div class="flex items-center mb-4">
<img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 shadow-lg" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar">
<div class="ml-4">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-100">Mark Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Food Blogger</p>
</div>
</div>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-blue-300 dark:text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
</div>
<p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6 flex-grow">
"This place truly understands flavor! Every dish I've tried has been exceptional, beautifully presented, and perfectly portioned. The online ordering system is a breeze. A definite culinary delight."
</p>
<div class="flex justify-end mt-auto">
<a href="#" class="inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:underline">
Read More
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- Comment Card 3 -->
<div class="relative p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden hover:scale-105 transition-transform duration-300 ease-in-out
transform rotate-x-6 rotate-y-3 skew-x-2 skew-y-1 perspective-1000
dark:hover:shadow-green-500/30
after:absolute after:inset-y-0 after:left-0 after:w-1 after:bg-green-500 after:rounded-l-lg
before:absolute before:inset-x-0 before:top-0 before:h-1 before:bg-green-400 before:rounded-t-lg
group">
<div class="absolute inset-0 bg-gradient-to-br from-green-50 to-lime-50 dark:from-gray-900 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl z-0"></div>
<div class="relative z-10 flex flex-col h-full">
<div class="flex items-center mb-4">
<img class="w-14 h-14 rounded-full border-4 border-green-300 dark:border-green-600 shadow-lg" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar">
<div class="ml-4">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-100">Sophia Lee</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Food Enthusiast</p>
</div>
</div>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
</div>
<p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6 flex-grow">
"I'm a regular here, and for good reason! The consistency of quality is impressive, and the customer service is outstanding. They always go the extra mile. Keep up the fantastic work!"
</p>
<div class="flex justify-end mt-auto">
<a href="#" class="inline-flex items-center text-green-600 dark:text-green-400 font-semibold hover:underline">
Read More
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- Call to action for more reviews -->
<div class="mt-16 text-center">
<a href="#" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-bold rounded-full shadow-lg
bg-gradient-to-r from-red-500 to-orange-500 text-white
hover:from-red-600 hover:to-orange-600
dark:from-red-600 dark:to-orange-600
dark:hover:from-red-700 dark:hover:to-orange-700
transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105
focus:outline-none focus:ring-4 focus:ring-red-400 dark:focus:ring-red-700 focus:ring-opacity-75
cool-neutral-button-shadow">
View All Reviews
<svg class="ml-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
</svg>
</a>
</div>
</div>
</section>
<style>
/* This CSS is typically handled by a global stylesheet or a build process */
.cool-neutral-text-gradient {
background-image: linear-gradient(to right, #4A5568, #2D3748);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
html.dark .cool-neutral-text-gradient {
background-image: linear-gradient(to right, #CBD5E0, #F7FAFC);
}
.perspective-1000 {
perspective: 1000px;
}
/* Custom 3D transformations for cards */
.transform {
transform-style: preserve-3d;
}
.cool-neutral-button-shadow {
box-shadow: 0 10px 20px rgba(239, 68, 68, 0.2), 0 6px 6px rgba(239, 68, 68, 0.2);
}
html.dark .cool-neutral-button-shadow {
box-shadow: 0 10px 20px rgba(185, 28, 28, 0.4), 0 6px 6px rgba(185, 28, 28, 0.4);
}
</style>
Composants associés
Composant de la section des commentaires
Un composant simple, épuré et minimaliste de la section des commentaires avec une palette de couleurs rétro/vintage, conçu pour la documentation ou les sites wiki. Il est entièrement réactif et prend en charge le mode sombre.
Composant de la section des commentaires
Un composant de section de commentaires inspiré du glassmorphisme pour les blogs ou les pages de contenu, avec des éléments translucides givrés ressemblant à du verre, des couleurs vives, une réactivité et une prise en charge du mode sombre.
Neon_Glow_Comments_Section
Un composant de section de commentaires réactif avec une esthétique néon / lueur vibrante, avec des avatars d’utilisateurs, des horodatages et un bouton de réponse. Prend en charge le mode sombre et est conçu pour les interfaces de médias sociaux.