Composant du système d’évaluation
Un composant Web réactif pour l’évaluation des éléments avec un design skeuomorphe qui imite ses homologues du monde réel. Convient pour présenter des travaux ou des produits dans un portfolio.
HTML Code
<div class="max-w-lg mx-auto p-4 bg-gray-800 text-white rounded-lg shadow-lg dark:bg-gray-900">
<h2 class="text-xl font-bold mb-4">Rating System</h2>
<div class="flex items-center mb-6">
<img src="https://picsum.photos/100/100" alt="Product Image" class="w-24 h-24 rounded-lg shadow-md mr-4" />
<div>
<h3 class="text-lg font-semibold">Product Name</h3>
<p class="text-gray-400">Product description goes here.</p>
<div class="flex items-center mt-2">
<span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-yellow-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-gray-400 mr-1"><i class="fas fa-star"></i></span>
<span class="text-gray-500">(3/5)</span>
</div>
</div>
</div>
<h4 class="text-md font-semibold mb-3">User Reviews</h4>
<div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
<span class="font-bold">John Doe</span>
<span class="text-gray-400 ml-2">5 hours ago</span>
</div>
<p class="text-gray-300">This product is amazing! Highly recommend it to everyone.</p>
</div>
<div class="bg-gray-700 p-3 rounded-lg mb-4 shadow-lg">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2" />
<span class="font-bold">Jane Smith</span>
<span class="text-gray-400 ml-2">3 hours ago</span>
</div>
<p class="text-gray-300">Not what I expected, but decent quality overall.</p>
</div>
<div class="flex items-center justify-between mt-4">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded shadow">Rate Product</button>
<button class="bg-red-600 hover:bg-red-700 text-white font-semibold py-2 px-4 rounded shadow">Report</button>
</div>
</div>Composants associés
Composant du système d’évaluation
Un composant complexe de système d’évaluation à thème rétro pour les médias sociaux, doté d’une palette de couleurs monochromatiques. Il est entièrement réactif et prend en charge un mode sombre. Ce composant utilise uniquement HTML et Tailwind CSS, sans JavaScript.
Système d’évaluation du Glassmorphism
Un système d’évaluation de style Glassmorphism avec des couleurs complémentaires, conçu pour les plateformes de médias sociaux. Il comprend une mise en page réactive et la prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant du système d’évaluation
Un composant de système d’évaluation minimaliste adapté aux sites Web d’entreprise, avec une mise en page réactive et une prise en charge du thème sombre.