Retro_Vintage_Product_Reviews_Component
Un componente semplice e reattivo per le recensioni dei prodotti con un'estetica retrò/vintage, che utilizza toni blu professionali adatti ad aziende manifatturiere/industriali. Include il supporto per la modalità scura.
Codice HTML
<section class="font-mono bg-blue-50 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl sm:text-4xl font-bold text-center mb-12 uppercase tracking-wider text-blue-800 dark:text-blue-200 border-b-4 border-blue-600 dark:border-blue-400 pb-4 inline-block mx-auto">
Customer Feedback Terminal
</h2>
<div class="grid gap-8 sm:grid-cols-1 lg:grid-cols-2">
<!-- Review Card 1 -->
<div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-blue-300 dark:border-gray-700 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue- সহায়-400 mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar">
<div>
<p class="font-semibold text-blue-800 dark:text-blue-100">Jasper 'The Cog' Milligan</p>
<p class="text-sm text-blue-600 dark:text-blue-300">Production Manager</p>
</div>
</div>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-gray-400 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
</div>
<blockquote class="text-blue-700 dark:text-blue-200 italic mb-4 border-l-4 border-blue-500 dark:border-blue-400 pl-4">
"This machinery is a workhorse! Precision engineering from a bygone era, but with modern reliability. Integrates seamlessly with our existing setup. A true industrial classic!"
</blockquote>
<p class="text-sm text-blue-600 dark:text-blue-300 text-right">— Reviewed on: Octane 23, 1997</p>
</div>
<!-- Review Card 2 -->
<div class="bg-blue-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg border-2 border-blue-300 dark:border-gray-700 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar">
<div>
<p class="font-semibold text-blue-800 dark:text-blue-100">Eleanor 'The Spark' Vance</p>
<p class="text-sm text-blue-600 dark:text-blue-300">Lead Engineer, Robotics Division</p>
</div>
</div>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-500 dark:text-yellow-400 mr-1" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 text-yellow-500 dark: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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118l-2.8-2.034c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
</div>
<blockquote class="text-blue-700 dark:text-blue-200 italic mb-4 border-l-4 border-blue-500 dark:border-blue-400 pl-4">
"Absolutely fantastic! The build quality reminds me of the good old days – robust and reliable. It handles extreme conditions without a hitch. A crucial asset for our high-tech industrial applications."
</blockquote>
<p class="text-sm text-blue-600 dark:text-blue-300 text-right">— Reviewed on: Nov 14, 1998</p>
</div>
</div>
</div>
</section>Componenti correlati
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.
Recensioni prodotto Skeuomorphic Componente - Blu oceano
Un componente di revisione del prodotto di complessità moderata progettato con uno stile scheumorfico, che utilizza i toni dell'oceano/blu per scopi aziendali/aziendali. È dotato di un design reattivo, supporto per la modalità oscura ed elementi interattivi.
Componente delle recensioni dei prodotti
Un componente reattivo per le recensioni dei prodotti creato con Tailwind CSS, con microinterazioni al passaggio del mouse, supporto per temi scuri e immagini segnaposto. Non viene utilizzato alcun JavaScript.