Retro_Vintage_Product_Reviews_Component
Un composant d’avis sur les produits simple et réactif avec une esthétique rétro/vintage, utilisant des tons bleus professionnels adaptés aux entreprises manufacturières/industrielles. Inclut la prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant Avis sur les produits
Il s’agit d’un composant complexe d’avis sur les produits conçu pour un tableau de bord, avec des éléments de conception 3D, des couleurs de terre et la prise en charge du mode sombre.
Composant Avis sur les produits
Style rétro/vintage, palette de couleurs des tons de terre, complexité modérée Composant d’avis sur les produits avec un design réactif et prise en charge du thème sombre. Utilise Tailwind CSS pour le stylisme, picsum.photos pour les images de produits et randomuser.me pour les avatars. Pas de JavaScript.
Composant Avis sur les produits
Composant utilisant Tailwind CSS avec le style Neumorphism, les effets réactifs et la prise en charge du thème sombre. Aucun code JavaScript n’est inclus. Des images et des avatars de substitution sont utilisés.