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
Componente delle recensioni dei prodotti
Un componente reattivo per le recensioni dei prodotti con un design industriale delle materie prime, una tavolozza di colori retrò/vintage tenui e il supporto della modalità scura, adatto per applicazioni meteorologiche/climatiche.
Componente delle recensioni dei prodotti
Un componente per le recensioni dei prodotti con elementi di progettazione 3D, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Componente delle recensioni dei prodotti
Un componente semplice e reattivo per le recensioni dei prodotti con un'estetica di design 3D, una combinazione di colori in bianco e nero con un accento luminoso, progettato per CRM/Business Tools, incluso il supporto della modalità scura.