Componente delle recensioni dei prodotti
Un componente semplice e reattivo per le recensioni dei prodotti con un design organico/ispirato alla natura, toni seppia/marrone, supporto per la modalità oscura e adatto per piattaforme di intrattenimento/multimediali.
Codice HTML
<div class="font-sans antialiased text-gray-800 bg-amber-50 dark:bg-stone-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">
<div class="w-full max-w-2xl bg-amber-100 dark:bg-stone-800 rounded-xl shadow-lg overflow-hidden border border-amber-200 dark:border-stone-700 mx-auto">
<div class="p-6 sm:p-8">
<h2 class="text-2xl sm:text-3xl font-serif text-amber-900 dark:text-amber-50 mb-6 text-center tracking-wide">What Our Viewers Say</h2>
<!-- Review 1 -->
<div class="bg-amber-50 dark:bg-stone-700 p-5 rounded-lg mb-6 last:mb-0 border border-amber-100 dark:border-stone-600 shadow-sm flex flex-col sm:flex-row items-start sm:items-center">
<img class="w-16 h-16 rounded-full object-cover mr-4 mb-4 sm:mb-0 border-2 border-amber-300 dark:border-amber-600 flex-shrink-0" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Alice Johnson">
<div class="flex-grow">
<div class="flex items-center mb-2">
<span class="text-amber-700 dark:text-amber-300 font-semibold mr-2">Alice J.</span>
<div class="flex text-amber-500 dark:text-amber-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
</div>
</div>
<p class="text-stone-700 dark:text-stone-300 leading-relaxed text-sm lg:text-base">"Absolutely captivated! The storyline was so immersive, and the visuals were stunning. A truly unique experience that felt both fresh and familiar."</p>
</div>
</div>
<!-- Review 2 -->
<div class="bg-amber-50 dark:bg-stone-700 p-5 rounded-lg mb-6 last:mb-0 border border-amber-100 dark:border-stone-600 shadow-sm flex flex-col sm:flex-row items-start sm:items-center">
<img class="w-16 h-16 rounded-full object-cover mr-4 mb-4 sm:mb-0 border-2 border-amber-300 dark:border-amber-600 flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Mark Davis">
<div class="flex-grow">
<div class="flex items-center mb-2">
<span class="text-amber-700 dark:text-amber-300 font-semibold mr-2">Mark D.</span>
<div class="flex text-amber-500 dark:text-amber-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current text-amber-200 dark:text-stone-500" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
</div>
</div>
<p class="text-stone-700 dark:text-stone-300 leading-relaxed text-sm lg:text-base">"Great content for a relaxing evening. The pacing was perfect, and the character development was surprisingly deep. Definitely recommend it!"</p>
</div>
</div>
<!-- Review 3 -->
<div class="bg-amber-50 dark:bg-stone-700 p-5 rounded-lg last:mb-0 border border-amber-100 dark:border-stone-600 shadow-sm flex flex-col sm:flex-row items-start sm:items-center">
<img class="w-16 h-16 rounded-full object-cover mr-4 mb-4 sm:mb-0 border-2 border-amber-300 dark:border-amber-600 flex-shrink-0" src="https://randomuser.me/api/portraits/women/22.jpg" alt="Sophia Lee">
<div class="flex-grow">
<div class="flex items-center mb-2">
<span class="text-amber-700 dark:text-amber-300 font-semibold mr-2">Sophia L.</span>
<div class="flex text-amber-500 dark:text-amber-400">
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
<svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.277L12 18.896l-7.416 3.882 1.48-8.277-6.064-5.828 8.332-1.151z"/></svg>
</div>
</div>
<p class="text-stone-700 dark:text-stone-300 leading-relaxed text-sm lg:text-base">"A cinematic masterpiece! The production quality was top-notch, and the music score was simply breathtaking. It truly transported me to another world."</p>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Recensioni dei prodotti Componente 6
Un componente reattivo per la recensione del prodotto con i principi del Material Design, che supporta temi chiari e scuri.
Componente delle recensioni dei prodotti
Componente con Material Design, effetti reattivi e supporto per temi scuri.
Componente Neumorfico delle recensioni dei prodotti
Un componente semplice e reattivo per le recensioni dei prodotti con un design neumorfico, una combinazione di colori analoga e il supporto della modalità scura, adatto per siti Web aziendali o aziendali.