Composant de la section des commentaires
Un composant de section de commentaires réactif conçu pour les sites Web d’entreprise, avec des animations attrayantes, des couleurs vives et une prise en charge du mode sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-shadow duration-300 hover:shadow-xl">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Comments</h2>
<div class="space-y-4">
<div class="flex items-start gap-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<div class="flex-1">
<div class="bg-blue-100 dark:bg-blue-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
<p class="text-gray-700 dark:text-gray-200">This is a fantastic article! I learned so much.</p>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400">- John Doe</span>
</div>
</div>
<div class="flex items-start gap-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<div class="flex-1">
<div class="bg-green-100 dark:bg-green-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
<p class="text-gray-700 dark:text-gray-200">Great insights! Looking forward to more posts.</p>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400">- Jane Smith</span>
</div>
</div>
<div class="flex items-start gap-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<div class="flex-1">
<div class="bg-red-100 dark:bg-red-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
<p class="text-gray-700 dark:text-gray-200">I completely agree with this perspective. Well said!</p>
</div>
<span class="text-sm text-gray-500 dark:text-gray-400">- Tom Brown</span>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Leave a Comment:</h3>
<textarea class="w-full p-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 resize-none" rows="4" placeholder="Type your message here..."></textarea>
<button class="mt-4 w-full bg-blue-500 text-white font-semibold py-2 rounded-lg transition-colors duration-300 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500">Submit</button>
</div>
</div>
Composants associés
Industrial_Purple_Comments_Section
Un composant complexe et réactif de la section des commentaires avec une esthétique de design industriel et une palette de couleurs violet/violet, adapté aux blogs ou à la consommation de contenu. Comprend des éléments exposés, une sensation de matière première et une prise en charge du mode sombre.
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.
Composant de la section des commentaires
Un composant simple de la section des commentaires conçu avec une esthétique rétro/vintage et des tons de terre. Il présente un design nostalgique rappelant les années 80 et 90, conçu pour les interfaces de médias sociaux, avec prise en charge du mode sombre.