Composant de la section des commentaires
Un composant de section de commentaires de conception minimaliste/plate pour le commerce électronique avec des couleurs vives, une complexité modérée, un design réactif et une prise en charge du thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Customer Reviews</h2>
<!-- Comment 1 -->
<div class="mb-6 flex">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
<div>
<div class="flex items-center mb-2">
<p class="font-semibold text-blue-600 dark:text-blue-400">Sarah J.</p>
<p class="text-gray-500 dark:text-gray-400 text-sm ml-4">2 days ago</p>
</div>
<div class="flex items-center mb-2">
<span class="text-yellow-400">★★★★★</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">"Absolutely love this product! The quality is superb and it arrived so quickly. Highly recommend!"</p>
</div>
</div>
<!-- Comment 2 -->
<div class="mb-6 flex">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<div>
<div class="flex items-center mb-2">
<p class="font-semibold text-blue-600 dark:text-blue-400">Mark T.</p>
<p class="text-gray-500 dark:text-gray-400 text-sm ml-4">5 days ago</p>
</div>
<div class="flex items-center mb-2">
<span class="text-yellow-400">★★★★☆</span>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed">"Good product overall. It does what it says. Shipping was a bit slow, but worth the wait."</p>
</div>
</div>
<!-- Comment Form (moderate complexity interactive feature) -->
<div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Leave a Review</h3>
<form>
<div class="mb-4">
<label for="rating" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Rating</label>
<select id="rating" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 dark:text-white dark:border-gray-600">
<option>★★★★★ - Excellent</option>
<option>★★★★☆ - Very Good</option>
<option>★★★☆☆ - Good</option>
<option>★★☆☆☆ - Fair</option>
<option>★☆☆☆☆ - Poor</option>
</select>
</div>
<div class="mb-4">
<label for="comment" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Comment</label>
<textarea id="comment" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 dark:text-white dark:border-gray-600" placeholder="Share your thoughts..."></textarea>
</div>
<button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">
Submit Review
</button>
</form>
</div>
</div>Composants associés
Section des commentaires sur le brutalisme
Un composant de section de commentaires de style brutaliste pour les portfolios, avec des couleurs analogues, une complexité modérée, une réactivité et une prise en charge du mode sombre.
Composant de la section des commentaires
Un composant complexe et réactif de la section des commentaires conçu pour les systèmes de réservation, avec une palette de couleurs noir et blanc inspirée du Bauhaus et une couleur d’accent vive. Comprend les avatars des utilisateurs, le nombre d’étoiles, les horodatages et la prise en charge du mode sombre.
Composant de la section des commentaires
Un composant de section de commentaires propre et minimaliste avec une palette de couleurs bonbon/doux, conçu pour les plateformes éducatives. Dispose d’une mise en page réactive, d’une prise en charge du mode sombre et met l’accent sur la typographie.