Composants Section des commentaires Composant de la section des commentaires

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.

Aperçu

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

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.

Ouvrir

Composant de la section des commentaires

Une section de commentaires conçue avec skeuomorphism, avec des tons de terre et un support de thème sombre, adaptée aux sites de commerce électronique.

Ouvrir

Composant de la section des commentaires avec style neumorphisme

Composant avec conception Neumorphism, effets réactifs et prise en charge du thème sombre. Aucun code JavaScript n’est inclus.

Ouvrir