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
Composant de la section des commentaires
Un composant de section de commentaires réactif stylisé avec un design glassmorphism, avec des éléments translucides givrés ressemblant à du verre avec des effets de flou et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de la section des commentaires
Composant de section de commentaires réactifs avec skeuomorphisme, palette de couleurs pastel, complexité simple adaptée au commerce électronique. Thème sombre pris en charge.
Composant de la section des commentaires
Une section de commentaires réactive avec le style de conception Neumorphism, les couleurs Earth tone et la prise en charge du thème sombre pour le contenu du blog.