Componenti
Recensioni dei prodotti
Recensioni dei prodotti Componente - Toni gioiello giocosi con messa a fuoco su prenotazione
Recensioni dei prodotti Componente - Toni gioiello giocosi con messa a fuoco su prenotazione
Una componente complessa e giocosa per la recensione del prodotto con particolare attenzione alla prenotazione. Presenta colori dai toni gioiello, elementi arrotondati e piena reattività con il supporto della modalità oscura.
Codice HTML
<div class="font-sans antialiased text-gray-800 bg-emerald-50 dark:bg-gray-900 transition-colors duration-300 p-4 sm:p-6 lg:p-8">
<div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden animate-fade-in-up transform transition-all duration-500 scale-95 hover:scale-100 flex flex-col md:flex-row">
<!-- Left Section: Overall Rating & Summary -->
<div class="w-full md:w-1/3 p-6 sm:p-8 bg-emerald-600 dark:bg-emerald-800 text-white flex flex-col items-center justify-center text-center rounded-t-3xl md:rounded-l-3xl md:rounded-tr-none relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-emerald-700 to-emerald-500 opacity-20 dark:opacity-30"></div>
<div class="relative z-10">
<h2 class="text-4xl sm:text-5xl font-extrabold mb-2 leading-tight">4.8<span class="text-2xl">/5</span></h2>
<div class="flex justify-center mb-4 text-yellow-300 dark:text-yellow-400">
<svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-6 h-6 sm:w-8 sm:h-8 fill-current" viewBox="0 0 24 24"><path d="M12 15.4V6L8.73 12.44L2 12.87L7.04 17.15L5.42 23L12 19L18.58 23L16.96 17.15L22 12.87L15.27 12.44L12 6Z"/></svg>
</div>
<p class="text-lg sm:text-xl font-semibold mb-6">Based on 128 Reviews</p>
<button class="bg-white text-emerald-600 dark:bg-emerald-700 dark:text-white px-8 py-3 rounded-full font-bold text-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-500">
Leave a Review
</button>
</div>
</div>
<!-- Right Section: Individual Reviews & Filter -->
<div class="w-full md:w-2/3 p-6 sm:p-8 flex flex-col justify-between dark:text-gray-200">
<div>
<h3 class="text-2xl sm:text-3xl font-extrabold text-ruby-700 dark:text-ruby-400 mb-6">What our customers say</h3>
<!-- Filter/Sorting -->
<div class="flex flex-wrap gap-2 mb-6">
<button class="flex-1 min-w-[120px] px-4 py-2 bg-sapphire-600 dark:bg-sapphire-800 text-white rounded-full text-sm font-semibold hover:bg-sapphire-700 dark:hover:bg-sapphire-700 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-sapphire-300 dark:focus:ring-sapphire-600">
All Reviews (128)
</button>
<button class="flex-1 min-w-[120px] px-4 py-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-full text-sm font-semibold hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-500">
5 Stars (98)
</button>
<button class="flex-1 min-w-[120px] px-4 py-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-full text-sm font-semibold hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-500">
With Bookings
</button>
<button class="flex-1 min-w-[120px] px-4 py-2 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-600 rounded-full text-sm font-semibold hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-500">
Most Recent
</button>
</div>
<!-- Review Items (Scrollable) -->
<div class="space-y-6 max-h-96 md:max-h-[calc(100vh-250px)] overflow-y-auto pr-2 scrollbar-thumb-emerald-500 scrollbar-track-emerald-200 dark:scrollbar-thumb-emerald-700 dark:scrollbar-track-emerald-900 scrollbar-w-2 scrollbar-thumb-rounded scrollbar-track-rounded">
<!-- Review 1 -->
<div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 transform hover:-translate-y-0.5">
<img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-400 dark:border-emerald-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div>
<div class="flex items-center justify-between">
<h4 class="font-bold text-gray-900 dark:text-gray-100">Elara Vance</h4>
<div class="flex text-sm text-yellow-500 dark:text-yellow-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booked: <span class="font-semibold text-sapphire-600 dark:text-sapphire-400">Facial & Massage Package</span> on <time datetime="2023-10-26">Oct 26, 2023</time></p>
<p class="text-gray-700 dark:text-gray-300 mt-2">"Absolutely loved my spa day! The facial left my skin glowing and the massage was incredibly relaxing. Highly recommend the staff, they were so friendly and professional!"</p>
</div>
</div>
<!-- Review 2 -->
<div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 transform hover:-translate-y-0.5">
<img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-400 dark:border-emerald-500" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
<div>
<div class="flex items-center justify-between">
<h4 class="font-bold text-gray-900 dark:text-gray-100">Marcus Thorne</h4>
<div class="flex text-sm text-yellow-500 dark:text-yellow-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-4 h-4 fill-current text-gray-300 dark:text-gray-500" viewBox="0 0 24 24"><path d="M12 15.4V6L8.73 12.44L2 12.87L7.04 17.15L5.42 23L12 19L18.58 23L16.96 17.15L22 12.87L15.27 12.44L12 6Z"/></svg>
</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booked: <span class="font-semibold text-sapphire-600 dark:text-sapphire-400">Deep Tissue Massage</span> on <time datetime="2023-10-20">Oct 20, 2023</time></p>
<p class="text-gray-700 dark:text-gray-300 mt-2">"Good massage, felt much relief. The booking process was smooth and easy. Would book again for sure!"</p>
</div>
</div>
<!-- Review 3 -->
<div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 transform hover:-translate-y-0.5">
<img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-400 dark:border-emerald-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
<div>
<div class="flex items-center justify-between">
<h4 class="font-bold text-gray-900 dark:text-gray-100">Sophia Lee</h4>
<div class="flex text-sm text-yellow-500 dark:text-yellow-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booked: <span class="font-semibold text-sapphire-600 dark:text-sapphire-400">Aromatherapy Session</span> on <time datetime="2023-10-15">Oct 15, 2023</time></p>
<p class="text-gray-700 dark:text-gray-300 mt-2">"Wonderful experience! The aromatherapy was exactly what I needed after a stressful week. The online booking was super user-friendly."</p>
</div>
</div>
<!-- Review 4 -->
<div class="flex items-start gap-4 p-4 bg-gray-50 dark:bg-gray-700 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200 transform hover:-translate-y-0.5">
<img class="w-12 h-12 rounded-full object-cover border-2 border-emerald-400 dark:border-emerald-500" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
<div>
<div class="flex items-center justify-between">
<h4 class="font-bold text-gray-900 dark:text-gray-100">David Chen</h4>
<div class="flex text-sm text-yellow-500 dark:text-yellow-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.62L12 2L9.19 8.62L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/></svg>
<svg class="w-4 h-4 fill-current text-gray-300 dark:text-gray-500" viewBox="0 0 24 24"><path d="M12 15.4V6L8.73 12.44L2 12.87L7.04 17.15L5.42 23L12 19L18.58 23L16.96 17.15L22 12.87L15.27 12.44L12 6Z"/></svg>
</div>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Booked: <span class="font-semibold text-sapphire-600 dark:text-sapphire-400">Sports Massage</span> on <time datetime="2023-10-08">Oct 08, 2023</time></p>
<p class="text-gray-700 dark:text-gray-300 mt-2">"Very effective sports massage after my marathon. Professional and understanding. I appreciate the easy booking system!"</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* For a more custom scrollbar aligned with the playful theme */
.scrollbar-w-2::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.scrollbar-thumb-emerald-500::-webkit-scrollbar-thumb {
background-color: var(--tw-bg-emerald-500);
border-radius: 9999px;
}
.scrollbar-track-emerald-200::-webkit-scrollbar-track {
background-color: var(--tw-bg-emerald-200);
border-radius: 9999px;
}
.dark .scrollbar-thumb-emerald-700::-webkit-scrollbar-thumb {
background-color: var(--tw-bg-emerald-700);
}
.dark .scrollbar-track-emerald-900::-webkit-scrollbar-track {
background-color: var(--tw-bg-emerald-900);
}
/* Custom colors (optional: if you want to extend tailwind.config.js) */
/* If you were using a Tailwind config, these would be in 'theme.extend.colors' */
:root {
--color-emerald-50: #ecfdf5;
--color-emerald-200: #a7f3d0;
--color-emerald-400: #34d399;
--color-emerald-500: #10b981;
--color-emerald-600: #059669;
--color-emerald-700: #047857;
--color-emerald-800: #065f46;
--color-emerald-900: #064e40;
--color-sapphire-400: #60a5fa; /* A vibrant blue */
--color-sapphire-600: #2563eb;
--color-sapphire-800: #1e40af;
--color-ruby-400: #ef4444; /* A vibrant red */
--color-ruby-700: #b91c1c;
}
.dark {
--tw-bg-emerald-50: #1a202c;
--tw-bg-gray-900: #1a202c;
}
</style>Componenti correlati
Componente delle recensioni dei prodotti
Stile retrò/vintage, combinazione di colori dei toni della terra, complessità moderata Recensioni dei prodotti Componente con design reattivo e supporto per temi scuri. Utilizza Tailwind CSS per lo styling, picsum.photos per le immagini dei prodotti e randomuser.me per gli avatar. Niente JavaScript.
Componente delle recensioni dei prodotti
Un complesso componente per le recensioni dei prodotti progettato per un cruscotto, con elementi di progettazione 3D, colori della terra e supporto per la modalità scura.
Recensioni prodotto Componente - Carta/Stampa-Neon/Elettrico
Un componente semplice e reattivo per le recensioni dei prodotti con un design ispirato alla carta/stampa e una combinazione di colori neon/elettrico, adatto per la documentazione o i siti wiki. Include il supporto per la modalità oscura.