Rechercher des composants

Catégories

Composants Section des commentaires

Section des commentaires

Zone où les utilisateurs peuvent poster des commentaires

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>

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

                <div class="container mx-auto p-4 bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 shadow-xl">
  <h2 class="text-2xl font-bold mb-6 border-b-4 border-yellow-500 pb-2">Comments</h2>
  <div class="space-y-6">
    <!-- Comment 1 -->
    <div class="bg-stone-200 dark:bg-stone-800 p-4 shadow-md border-2 border-yellow-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4 border-2 border-yellow-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div>
          <h4 class="font-bold text-yellow-700 dark:text-yellow-300">John Doe</h4>
          <p class="text-sm text-stone-600 dark:text-stone-400">2 days ago</p>
        </div>
      </div>
      <p class="mb-4">This is a fantastic project! Really impressed with the use of colors and typography.</p>
      <div class="flex justify-end text-sm">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</a>
        <a href="#" class="text-red-600 dark:text-red-400 hover:underline">Report</a>
      </div>
    </div>

    <!-- Comment 2 -->
    <div class="bg-stone-200 dark:bg-stone-800 p-4 shadow-md border-2 border-orange-600">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full mr-4 border-2 border-orange-500" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
        <div>
          <h4 class="font-bold text-orange-700 dark:text-orange-300">Jane Smith</h4>
          <p class="text-sm text-stone-600 dark:text-stone-400">1 day ago</p>
        </div>
      </div>
      <p class="mb-4">Very inspiring work! The brutalist style is really well-executed here.</p>
      <div class="flex justify-end text-sm">
        <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline mr-4">Reply</a>
        <a href="#" class="text-red-600 dark:text-red-400 hover:underline">Report</a>
      </div>
    </div>

        <!-- Add New Comment Form -->
    <div class="bg-stone-300 dark:bg-stone-700 p-6 shadow-inner border-2 border-red-600">
      <h4 class="text-lg font-bold mb-4 text-red-800 dark:text-red-200">Leave a Comment</h4>
      <form>
        <div class="mb-4">
          <label class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2" for="name">
            Name
          </label>
          <input class="shadow appearance-none border border-red-500 dark:border-red-700 rounded w-full py-2 px-3 text-stone-700 dark:text-stone-900 leading-tight focus:outline-none focus:shadow-outline bg-yellow-100 dark:bg-yellow-900" id="name" type="text" placeholder="Your Name">
        </div>
        <div class="mb-4">
          <label class="block text-stone-700 dark:text-stone-300 text-sm font-bold mb-2" for="comment">
            Comment
          </label>
          <textarea class="shadow appearance-none border border-red-500 dark:border-red-700 rounded w-full py-2 px-3 text-stone-700 dark:text-stone-900 leading-tight focus:outline-none focus:shadow-outline bg-orange-100 dark:bg-orange-900 h-32" id="comment" placeholder="Your Comment"></textarea>
        </div>
        <div class="flex items-center justify-between">
          <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline border-2 border-black dark:border-white" type="button">
            Submit Comment
          </button>
        </div>
      </form>
    </div>

  </div>
</div>

Composant de la section des commentaires

Une section de commentaires réactive conçue pour les plateformes de commerce électronique avec une interface utilisateur en mode sombre et une palette de couleurs triadique.

Ouvrir Aperçu

                <div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold mb-4">Customer Reviews</h2>
    <div class="space-y-4">
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                    <h3 class="font-semibold">John Doe</h3>
                    <p class="text-gray-300">This product is fantastic! It has exceeded my expectations.</p>
                    <div class="mt-2 flex items-center">
                        <span class="text-yellow-400">★★★★☆</span>
                        <span class="ml-2 text-sm text-gray-500">2 days ago</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                    <h3 class="font-semibold">Jane Smith</h3>
                    <p class="text-gray-300">Great quality! I loved the design and it fits perfectly.</p>
                    <div class="mt-2 flex items-center">
                        <span class="text-yellow-400">★★★★★</span>
                        <span class="ml-2 text-sm text-gray-500">1 week ago</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                    <h3 class="font-semibold">Michael Johnson</h3>
                    <p class="text-gray-300">Not what I expected, but still a decent product.</p>
                    <div class="mt-2 flex items-center">
                        <span class="text-yellow-400">★★★☆☆</span>
                        <span class="ml-2 text-sm text-gray-500">2 weeks ago</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-6 p-4 bg-gray-800 rounded-lg">
        <h3 class="text-lg font-semibold">Leave a Comment</h3>
        <form>
            <textarea class="w-full p-2 mb-2 bg-gray-700 text-white rounded-lg" rows="3" placeholder="Write your review..."></textarea>
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-white">User123</span>
                </div>
                <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-500 focus:outline-none">Submit</button>
            </div>
        </form>
    </div>
</div>

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.

Ouvrir Aperçu

                <div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6 max-w-lg mx-auto mt-8 dark:bg-gray-800 dark:bg-opacity-30">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Comments</h2>
    <div class="mt-4">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <div class="flex justify-between items-center">
                    <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">John Doe</h3>
                    <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
                </div>
                <p class="mt-1 text-gray-600 dark:text-gray-300">This is an amazing post! Thanks for sharing!</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <div class="flex justify-between items-center">
                    <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Jane Smith</h3>
                    <span class="text-sm text-gray-500 dark:text-gray-400">4 hours ago</span>
                </div>
                <p class="mt-1 text-gray-600 dark:text-gray-300">I really enjoyed reading this. Great insights!</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <div class="flex justify-between items-center">
                    <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Michael Brown</h3>
                    <span class="text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
                </div>
                <p class="mt-1 text-gray-600 dark:text-gray-300">Very well written! I appreciate the effort.</p>
            </div>
        </div>
    </div>
    <form class="mt-6">
        <textarea class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white" rows="3" placeholder="Add a comment..."></textarea>
        <button type="submit" class="mt-2 bg-blue-500 hover:bg-blue-600 rounded-lg text-white py-2 px-4">Submit</button>
    </form>
</div>

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

                <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

<style>
  .neumorphic {
    border-radius: 10px;
    background: #e0e0e0;
    box-shadow: 8px 8px 15px #bebebe, -8px -8px 15px #ffffff;
    transition: all 0.3s ease;
  }

  .neumorphic:hover {
    box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  }

  .dark .neumorphic {
    background: #333333;
    box-shadow: 8px 8px 15px #222222, -8px -8px 15px #444444;
  }

  .dark .neumorphic:hover {
    box-shadow: 4px 4px 8px #222222, -4px -4px 8px #444444;
  }

  .neumorphic-input {
    border-radius: 5px;
    background: #e0e0e0;
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
    padding: 10px;
    width: 100%;
    color: #333;
  }

  .dark .neumorphic-input {
    background: #333333;
    box-shadow: inset 5px 5px 10px #222222, inset -5px -5px 10px #444444;
    color: #ccc;
  }
</style>

<div class="container mx-auto p-4">

  <div class="neumorphic p-6 mb-6">
    <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Comments</h2>

    <!-- Comment Input -->
    <div class="mb-4">
      <textarea class="neumorphic-input" rows="3" placeholder="Add a comment..."></textarea>
    </div>
    <button class="neumorphic bg-blue-500 text-white px-4 py-2 rounded">Post Comment</button>

    <!-- Existing Comments -->
    <div class="mt-6">

      <!-- Comment 1 -->
      <div class="neumorphic p-4 mb-4">
        <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-4 neumorphic">
          <div>
            <p class="font-bold text-gray-800 dark:text-white">John Doe</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">2 days ago</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300">This is a great component! I love the neumorphism style.</p>
      </div>

      <!-- Comment 2 -->
      <div class="neumorphic p-4 mb-4">
        <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-4 neumorphic">
          <div>
            <p class="font-bold text-gray-800 dark:text-white">Jane Smith</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">1 day ago</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300">Looks really good with the dark theme as well.</p>
      </div>

    </div>
  </div>

</div>