Rechercher des composants

Catégories

Composants Section des commentaires

Section des commentaires

Zone où les utilisateurs peuvent poster des commentaires

CommentairesSection

Un composant de section de commentaires réactif et compatible avec les thèmes sombres pour le commerce électronique avec un design minimaliste / plat, une palette de couleurs triadique et des éléments d’interaction complexes, construit avec Tailwind CSS. Utilise picsum.photos et randomuser.me pour les images de démonstration.

Ouvrir Aperçu

                <div class="container mx-auto p-4 dark:bg-gray-900 dark:text-white">
  <h2 class="text-2xl font-bold mb-6">Customer Reviews</h2>

  </div>

Composant de la section des commentaires

Composant avec conception Neumorphism, schéma de couleurs triadique et complexité modérée pour les médias sociaux, mis en œuvre à l’aide de Tailwind CSS avec un design réactif et une prise en charge du thème sombre.

Ouvrir Aperçu

                
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comments Section</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .neumorphism {
            box-shadow: 5px 5px 10px #cbced1, -5px -5px 10px #ffffff;
        }
        .dark .neumorphism {
            box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #333333;
        }
        .neumorphism-inset {
            box-shadow: inset 5px 5px 10px #cbced1, inset -5px -5px 10px #ffffff;
        }
        .dark .neumorphism-inset {
            box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #333333;
        }
    </style>
</head>
<body class="bg-gray-200 dark:bg-gray-800 transition duration-300">
    <div class="container mx-auto p-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg p-6 neumorphism transition duration-300">
            <h2 class="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-white">Comments</h2>

            <!-- Comment Input -->
            <div class="mb-6">
                <textarea class="w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-600 text-gray-800 dark:text-white neumorphism-inset focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 transition duration-300" rows="4" placeholder="Add a comment..."></textarea>
                <button class="mt-3 w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 neumorphism transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">Post Comment</button>
            </div>

            <!-- Comment List -->
            <div class="space-y-4">
                <!-- Single Comment -->
                <div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg neumorphism transition duration-300">
                    <div class="flex items-start space-x-4">
                        <img class="w-10 h-10 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
                        <div class="flex-1">
                            <div class="flex justify-between items-center">
                                <span class="font-semibold text-gray-800 dark:text-white">Sarah Johnson</span>
                                <span class="text-sm text-gray-500 dark:text-gray-300">2 hours ago</span>
                            </div>
                            <p class="text-gray-700 dark:text-gray-200 mt-1">This is a great post! Very informative.</p>
                            <div class="flex space-x-4 mt-3">
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Single Comment -->
                <div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg neumorphism transition duration-300">
                    <div class="flex items-start space-x-4">
                        <img class="w-10 h-10 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/men/76.jpg" alt="User Avatar">
                        <div class="flex-1">
                            <div class="flex justify-between items-center">
                                <span class="font-semibold text-gray-800 dark:text-white">David Miller</span>
                                <span class="text-sm text-gray-500 dark:text-gray-300">1 hour ago</span>
                            </div>
                            <p class="text-gray-700 dark:text-gray-200 mt-1">I agree! Looking forward to more content like this.</p>
                             <div class="flex space-x-4 mt-3">
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                 <!-- Reply Example -->
                 <div class="ml-14 bg-gray-200 dark:bg-gray-700 p-4 rounded-lg neumorphism transition duration-300">
                    <div class="flex items-start space-x-4">
                        <img class="w-8 h-8 rounded-full object-cover neumorphism" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
                        <div class="flex-1">
                            <div class="flex justify-between items-center">
                                <span class="font-semibold text-gray-800 dark:text-white">Emily Clark</span>
                                <span class="text-sm text-gray-500 dark:text-gray-300">45 minutes ago</span>
                            </div>
                            <p class="text-gray-700 dark:text-gray-200 mt-1">Thanks David! Glad you liked it.</p>
                             <div class="flex space-x-4 mt-3">
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Like</button>
                                <button class="text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300">Reply</button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>
</html>

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 Aperçu

                <div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Customer Comments</h2>
    <div class="space-y-4">
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-500" />
            <div class="ml-3">
                <p class="text-brown-800 dark:text-brown-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">This product exceeded my expectations! Highly recommend.</p>
                <div class="mt-2">
                    <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
                </div>
            </div>
        </div>
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-500" />
            <div class="ml-3">
                <p class="text-brown-800 dark:text-brown-200 font-medium">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">The quality is fantastic! Will buy again.</p>
                <div class="mt-2">
                    <span class="text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
                </div>
            </div>
        </div>
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-500" />
            <div class="ml-3">
                <p class="text-brown-800 dark:text-brown-200 font-medium">Mike Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">Fast shipping and great customer service!</p>
                <div class="mt-2">
                    <span class="text-sm text-gray-500 dark:text-gray-400">3 days ago</span>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Leave a Comment:</h3>
        <textarea class="w-full p-2 border rounded-lg bg-gray-100 dark:bg-gray-700 border-brown-300 dark:border-brown-600 focus:outline-none focus:ring focus:ring-brown-500 dark:focus:ring-brown-400" rows="4" placeholder="Write your thoughts..."></textarea>
        <button class="mt-2 px-4 py-2 bg-brown-600 text-white rounded-lg hover:bg-brown-500 focus:outline-none focus:ring focus:ring-brown-500 dark:bg-brown-500 dark:hover:bg-brown-400 dark:focus:ring-brown-400">Submit</button>
    </div>
</div>

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.

Ouvrir Aperçu

                <div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-2xl font-bold text-brown-800 dark:text-brown-200 mb-4">Comments</h2>
    <div class="flex mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-4">
        <div class="flex-1">
            <input type="text" placeholder="Write a comment..." class="w-full bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 p-2 rounded-lg shadow border border-gray-300 dark:border-gray-600 placeholder-gray-600 dark:placeholder-gray-400 focus:ring focus:ring-brown-300 dark:focus:ring-brown-500"/>
        </div>
    </div>
    <div class="border-t border-gray-300 dark:border-gray-600 pt-4">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-3">
            <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg shadow">
                <p class="text-brown-800 dark:text-brown-200"><strong>Alice</strong>  <span class="text-gray-600 dark:text-gray-400">- 2 hours ago</span></p>
                <p class="text-gray-800 dark:text-gray-300">Love this post! It really brings back memories.</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-3">
            <div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg shadow">
                <p class="text-brown-800 dark:text-brown-200"><strong>Bob</strong>  <span class="text-gray-600 dark:text-gray-400">- 4 hours ago</span></p>
                <p class="text-gray-800 dark:text-gray-300">The vintage vibe is amazing!</p>
            </div>
        </div>
    </div>
</div>

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.

Ouvrir Aperçu

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-4">Comments</h2>

  <!-- Comment 1 -->
  <div class="mb-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-inner">
    <div class="flex items-center mb-2">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
        <p class="text-sm text-gray-500">2 days ago</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300">This is a great product! Highly recommend.</p>
  </div>

  <!-- Comment 2 -->
  <div class="mb-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-inner">
    <div class="flex items-center mb-2">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
        <p class="text-sm text-gray-500">1 day ago</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300">Fast shipping and excellent quality.</p>
  </div>

  <!-- Add new comment form -->
  <div class="mt-6">
    <textarea class="w-full p-3 rounded-lg border-gray-300 dark:border-gray-600 border-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-200" rows="3" placeholder="Add a comment..."></textarea>
    <button class="mt-3 px-6 py-2 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Submit Comment</button>
  </div>

</div>

Composant de la section des commentaires

Un composant simple de section de commentaires conçu avec le style Material Design, utilisant une palette de couleurs monochromatique, optimisé pour les interfaces de médias sociaux et un design réactif avec prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="max-w-2xl mx-auto p-4 dark:bg-gray-800 bg-white rounded-lg shadow-md">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Comments</h2>
    <div class="mt-4 space-y-4">
        <!-- Comment 1 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">This is a comment. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">2 hours ago</span>
            </div>
        </div>
        <!-- Comment 2 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Another comment! Vivamus sit amet nulla nec urna maximus suscipit.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">3 hours ago</span>
            </div>
        </div>
        <!-- Comment 3 -->
        <div class="flex items-start space-x-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <div class="flex-1">
                <p class="text-gray-800 dark:text-gray-200 font-medium">Alice Brown</p>
                <p class="text-gray-600 dark:text-gray-400">This is another comment. Donec eget tristique eros, ac auctor orci.</p>
                <span class="text-gray-500 dark:text-gray-500 text-sm">5 hours ago</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <textarea placeholder="Add a comment..." class="w-full dark:bg-gray-700 bg-gray-100 border border-gray-300 dark:border-gray-600 rounded-md p-2" rows="3"></textarea>
        <button class="mt-2 w-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 text-white font-semibold py-2 rounded-md">Post Comment</button>
    </div>
</div>

Composant de la section des commentaires

Un composant de la section des commentaires conçu dans un style brutaliste avec des couleurs pastel, adapté aux sites Web de commerce électronique, avec des avatars d’utilisateurs, des commentaires et un niveau d’interactivité modéré. La conception prend en charge le mode sombre.

Ouvrir Aperçu

                <div class="max-w-4xl mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Comments Section</h2>
    <div class="border-t border-gray-300 dark:border-gray-600"></div>
    <div class="mt-6">
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">This product is amazing! Highly recommend it.</p>
                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">3 hours ago</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/2.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">I had a good experience with this purchase.</p>
                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">5 hours ago</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/3.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Tom Brown</p>
                <p class="text-sm text-gray-600 dark:text-gray-400">Could be better; I faced some issues.</p>
                <p class="text-xs text-gray-500 dark:text-gray-500 mt-1">1 day ago</p>
            </div>
        </div>
    </div>
    <div class="border-t border-gray-300 dark:border-gray-600 mt-4 pt-4">
        <h3 class="text-lg font-bold text-gray-800 dark:text-white mb-3">Leave a Comment:</h3>
        <textarea class="w-full h-24 p-2 border border-gray-400 dark:border-gray-600 rounded-md focus:outline-none focus:ring focus:ring-green-200 dark:focus:ring-green-700" placeholder="Write your comment here..."></textarea>
        <button class="mt-2 px-4 py-2 bg-green-500 hover:bg-green-600 text-white font-semibold rounded-md dark:bg-green-600 dark:hover:bg-green-700">Submit</button>
    </div>
</div>

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.

Ouvrir Aperçu

                <div class="max-w-3xl mx-auto my-10 p-6 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-inner">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Comments</h2>
    <div class="mb-6">
        <textarea class="w-full h-24 bg-gray-300 dark:bg-gray-700 border border-gray-400 rounded-lg shadow-md focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400" placeholder="Add a comment..."></textarea>
    </div>
    <button class="py-2 px-4 bg-green-500 dark:bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-600 dark:hover:bg-green-700 transition duration-300">Post Comment</button>

    <div class="mt-10">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
            <div class="ml-4 bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-md">
                <h3 class="font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
                <p class="text-gray-600 dark:text-gray-400">This is a sample comment content. I really enjoyed reading this article!</p>
                <span class="text-sm text-gray-500 dark:text-gray-300">2 hours ago</span>
            </div>
        </div>

        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
            <div class="ml-4 bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-md">
                <h3 class="font-semibold text-gray-800 dark:text-gray-200">Jane Doe</h3>
                <p class="text-gray-600 dark:text-gray-400">Thanks for sharing this amazing content!</p>
                <span class="text-sm text-gray-500 dark:text-gray-300">3 hours ago</span>
            </div>
        </div>

        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
            <div class="ml-4 bg-gray-300 dark:bg-gray-700 p-4 rounded-lg shadow-md">
                <h3 class="font-semibold text-gray-800 dark:text-gray-200">Alex Smith</h3>
                <p class="text-gray-600 dark:text-gray-400">Very insightful! I learned a lot.</p>
                <span class="text-sm text-gray-500 dark:text-gray-300">5 hours ago</span>
            </div>
        </div>
    </div>
</div>