Componente Sezione Commenti
Un componente complesso e coinvolgente della sezione dei commenti ispirato al 3D per siti Web di cibo/ristoranti, con neutri freddi, reattività completa e supporto per la modalità scura.
Codice HTML
<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>Componenti correlati
Componente Sezione Commenti
Una sezione commenti reattiva con stile di design Neumorphism, colori del tono della terra e supporto del tema scuro per i contenuti del blog.
CyberpunkCommentiSezione
Un componente della sezione commenti semplice e reattivo con un'estetica al neon futuristica e cyberpunk e una combinazione di colori sfumata arcobaleno, adatta per siti Web di viaggi/turismo. Include il supporto per la modalità oscura.
Componente Sezione Commenti
Una sezione commenti reattiva progettata per le piattaforme di e-commerce con un'interfaccia utente in modalità scura e una combinazione di colori triadica.