Scheda di recensione del prodotto retrò
Un componente di recensione del prodotto progettato con un'estetica retrò/vintage, utilizzando una combinazione di colori triadica (verde acqua, fucsia, ambra). È semplice, reattivo, supporta la modalità oscura ed è adatto per un portfolio per mostrare il feedback dei prodotti. Utilizza Tailwind CSS.
Codice HTML
<div class="max-w-sm mx-auto mb-8 p-6 bg-gray-100 rounded-lg shadow-lg border-2 border-dashed border-teal-500 dark:bg-gray-800 dark:border-teal-400">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-fuchsia-500 dark:border-fuchsia-400" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="text-lg font-bold text-fuchsia-600 dark:text-fuchsia-400">Janet Doe</p>
<div class="flex items-center text-amber-500 dark:text-amber-400 text-sm">
★★★★☆ <!-- 4 out of 5 stars -->
</div>
</div>
</div>
<div>
<p class="text-gray-800 dark:text-gray-200 leading-relaxed">
This product is amazing! The quality is fantastic, and it exceeded my expectations. Highly recommended for anyone looking for a great value. The retro design elements really pop!
</p>
</div>
</div>
<div class="max-w-sm mx-auto mb-8 p-6 bg-gray-100 rounded-lg shadow-lg border-2 border-dotted border-teal-500 dark:bg-gray-800 dark:border-teal-400">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-fuchsia-500 dark:border-fuchsia-400" src="https://randomuser.me/api/portraits/men/33.jpg" alt="User Avatar">
<div>
<p class="text-lg font-bold text-fuchsia-600 dark:text-fuchsia-400">Michael Smith</p>
<div class="flex items-center text-amber-500 dark:text-amber-400 text-sm">
★★★★★ <!-- 5 out of 5 stars -->
</div>
</div>
</div>
<div>
<p class="text-gray-800 dark:text-gray-200 leading-relaxed">
Absolutely love this! It fits perfectly into my retro-themed setup. The colors are vibrant a truly classic feel. Will definitely buy again.
</p>
</div>
</div>Componenti correlati
Neumorphic_Product_Reviews_Component_High_Contrast
Un componente neutromorfico complesso per le recensioni dei prodotti ad alto contrasto con funzioni di prenotazione, progettato per la reattività e la modalità scura, che offre un'interfaccia utente ricca e interattiva.
Componente Recensioni Prodotto (Pastello Skeuomorfo)
Un componente complesso e reattivo per le recensioni dei prodotti con un'estetica di design scheumorfico che utilizza colori pastello e supporta la modalità scura. Presenta carte a strati, sfumature sottili e ombre per creare profondità. Include avatar, nome, valutazione a stelle, testo della recensione e immagini opzionali. Utilizza esclusivamente Tailwind CSS senza JavaScript.
Componente delle recensioni dei prodotti
Un componente per le recensioni dei prodotti progettato in stile brutalismo, caratterizzato da contrasto elevato, design reattivo e supporto per temi scuri. Include avatar utente e immagini di prodotti da servizi segnaposto.